Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting Cursor Position in a <textarea>

    Does anyone know if it is possible, using JavaScript to get the currrent position of the cursor in a textarea (by cursor I mean the blinking verticle pipe, as is where text will be inserted when one types the next key).
    Thanks for all of your help.

  • #2
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    A while back I did a search and found a link to what seems to be an IE only solution....
    Link

  • #3
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You can also look into the Gecko DOM Range object:
    http://www.mozilla.org/docs/dom/domr...ef.html#998954
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So there is no 'true' cross browser solution (safari/mozilla/ie/opera) or a way to do it in all of them.
    Hmm, ok well if I know the size of the font the surely there must be a way to work out the number of chars on the current line then times it by the point size in pixels and add it to the left offset of the textarea?

  • #5
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    You don't know the size of the font.
    I can change that. I can have your CSS turned off.

    There isn't much you can 100% rely on for every single browser in the world. Target which ones you want to support (I support all browsers that conform to W3C standards, personally) and you make assumptions that people will have javascript enabled and CSS on and so on.
    You inform your users via an FAQ or some such what is needed to use your site to its fullest functionality if it's a commercial site. If it's your own, do what you want.

    Looking at other code that does similar things to what you want to do is often helpful. For example, the code right here in this site for the editor. It seems to know where my cursor is for both Firefox and MSIE...

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can work out where the cursor is in relation to the rest of the text in the textarea however I want to know where it is in relation to the page (eg 250px from the left, as I am making an autocomplete system for a textarea and want the pop-up box to appera somewhere logical.

  • #7
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Did you consider making the popup box appear smack dab in the middle of the screen?
    That would be the easiest way to make it cross-browser, I would think.

    Or...you could do the little trick of that other text editor and put a hidden control (iframe or whatever) right next to the textarea, then show it when you want the autocomplete going. It will always be right next to the textarea, so it's somewhat logical and even easier to make cross-browser, since you're basically just toggling visibility or display property/ies.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #8
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I seem to have solved that problem. I have made the textarea have a z-index of -1 and a position of 0,0 (the page itself will be in an iframe). Now the whole point of this is that I am making an JavaScript text editor with highlighting etc, which is based off of Helene. One of Helenes problems was that the current line that was being typed on was a one-row textarea, meaning that the text only got highlighted when the user worked on a different line, quite annoying. So my idea is to have a semi-hidden textarea to grab the input and then format it in a div. But, I have a problem, I cant get the two to line up by this I mean that when they type something in the z-indexed textarea its value is currently just displayed in the first child node of the div, however the cursor shows through the divs white background so you can see where the next letter will go. But for it to work I need to match the font and margin of the textarea to the div so that the position of the cursor is just in-front of the later letter in the div. It is hard to understand I know, here is some of my code:
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Stuff</title>
    <script type="text/javascript">
    function myfunc() {
    	alert(document.getElementsByTagName('textarea')[0].value);
    	document.getElementsByTagName('textarea')[0].focus();
    }
    </script>
    </head>
    
    <body>
    <textarea style="width: 650px; height: 450px; position: absolute; left: 0px; top: 0px; z-index: -1;"
    rows="0" cols="0"></textarea>
    <div style="width: 650px; height: 450px; position: absolute; left: 0px; top: 0px; z-index: 1; background-color: #FFFFFF;">
    </div>
    <button style="position: absolute; left: 600px; top: 480px; z-index: 1;" 
    onclick="myfunc();">
    Focus/Alert
    </button>
    </body>
    
    </html>
    If you click on the button you are focused on the editor and you can type, click it again to see the contents of it, but I can not seem to get the contents displayed in the div, well I can, but the font and size is different (because of scrollbars etc) and so it does not line up. Can anyone help me with this?

  • #9
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    I don't see CSS specifying font family and size. I'm pretty sure you can do that for both. Give that a shot.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have you considered a contentEditable division and if submitting a form using a hidden form element to copy the contents of the division too... In other words, get rid of the textarea...

    .....Willy

  • #11
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have been looking into that, as it is how much WYSIWYG editors work, however I am not sure about browser compatibility with them, any info?

  • #12
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WYSIWYG editors are nothing more than a set of objects, properties, methods, and events. So it's down to which ones exist in a given browser's object model. (IE seems to have the richest editing capabilities, for that matter.) If you can't find a compatibility table, you may need to consult the documentation of each browser, compare the available objects, properties, methods, and events, and figure out how to encapsulate those in such a way that they are consistent between hosts.
    Thanks in advance!

  • #13
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have done some looking up and it seems that Gecko, IE and the new version of Safari support it. So I am looking for any cross-os example code that will allow me to make a div or any other element editable.

  • #14
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have been looking into designMode, however I do have a problem with it, enter keys, I am making a texteditor (highlighting) and want each new line to be a new <li> (which will be a member of a <ol>, for line numbers) but it seems that the browsers like <p> can anyone help me?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •