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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts

    How do I keep the cursor position after the " has been replaced with "?

    Here is my example code

    Code:
    <html>
    <head>
    </head>
    <body onload="addtext()">
    
    How do I keep the cursor position after the " has been replaced with &amp;quot;?<br><br>
    <form name="update" id="update" method="post" action="">
      <textarea name="description" id="description" value="" cols="55" rows="15" onKeyUp="addtext()">Type a quote here[] and see the cursor move to the end here:</textarea>
    <br>
    Result:<br>
      <div name="outputtext" id="outputtext"></div>
    </form>
    
    </body>
    <script language="javascript" type="text/javascript">
    function addtext() {
    	var newtext = document.update.description.value;
    	document.getElementById('outputtext').innerHTML = newtext.replace(/\r\n|\n/g,"<br />");
    	document.getElementById('description').value = newtext.replace(/"/g,"&quot;");
    }
    </script>
    </html>
    Last edited by Jodarecode; 07-16-2010 at 08:59 PM.
    "The one closer to the truth is the one still learning"

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    For Firefox: the cursor position at the time of the function call is document.update.description.selectionStart.

    To move it back you use setSelectionRange(start, end).

    Eg.

    Code:
    function addtext() {
    	var newtext = document.update.description.value;
    	var curpos = document.update.description.selectionStart;
    	document.getElementById('outputtext').innerHTML = newtext.replace(/\r\n|\n/g,"<br />");
    	document.getElementById('description').value = newtext.replace(/"/g,"&quot;");
    	document.update.description.setSelectionRange(curpos+6, curpos+6);
    }
    The +6 here accounts for the length of the replacement.

    Getting it to work in IE is a bit more complicated, http://parentnode.org/javascript/wor...rsor-position/ might be of some help to you.
    Last edited by gusblake; 07-18-2010 at 12:55 AM.

  • #3
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts
    It seems to work ok after I had changed:
    Code:
    document.update.description.setSelectionRange(curpos+6, curpos+6);
    to:
    Code:
    document.update.description.setSelectionRange(curpos+0, curpos+0);
    Also when I type text to the point it pulls up the overflow scroll bar,
    the scroll bar scrolls to the top when I hit enter and cannot see what I am typing.
    I tried return false and still no go, any ideas?
    "The one closer to the truth is the one still learning"


  •  

    Posting Permissions

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