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
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts

    insert at cursor- maintain focus

    I have a newsletter CMS with a format bar.
    I have JS to insert format code at the cursor point (see end of this post).

    The problem is that, after the code is inserted the cursor is positioned at the end of the block of text.

    How to maintain cursor focus at the point of insertion?

    current insertion code...
    Code:
    function insertAtCursor(myField, myValue) {
            if (document.selection) // I.E.
              { myField.focus();
                sel = document.selection.createRange();
                sel.text = myValue; 
              }
                  //MOZILLA/NETSCAPE support
                  else if (myField.selectionStart || myField.selectionStart == '0') 
              { var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                myField.value = myField.value.substring(0, startPos)
                      + myValue 
                      + myField.value.substring(endPos, myField.value.length); myField.focus();}
                 else  { myField.value += myValue; myField.focus(); }} // end insert cursor
    thanks - kusalo

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,140
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is so far the best lead I have found.
    The working scenario I am after is not uncommon so I am surprised there is not a functional module about:
    ****
    Click in the textarea, click a button (bold, smilies, etc) and the inserted text/code is inserted at the cursor position AND the cursor remains (blinking) at the end of the new insertion.
    ****

    I have it working *but* when there is lots of text (ie. a scroll bar) on insertion the textarea jumps to the top of the box. Although the cursor retains position. This is confusing for the user.

    The reply box for the 'codingforums.com' forum works just fine
    How is it done?

    I am not a .js coder so the following is a hack of several snippets and is perhaps a bit messy.
    Code:
    <html><head>
    <title>Get/Set Caret in Textarea Example</title>
    <script>
    function insertAtCursor(myField, myValue) { 
        var val_length = myValue.length;
            if (document.selection) { sel = document.selection.createRange(); // I.E.
                sel.text = myValue;
                ctrl.focus(); }
            else if (myField.selectionStart || myField.selectionStart == '0') { // MOZILLA/NETSCAPE support
                var startPos = myField.selectionStart;
                    myCursor = startPos + val_length;
                var endPos = myField.selectionEnd; //alert(endPos);
                myField.value = myField.value.substring(0, startPos)
                      + myValue 
                      + myField.value.substring(endPos, myField.value.length);
                     setCaretPosition(document.getElementById('got'),myCursor); }
            else  { myField.value += myValue;
                setCaretPosition(document.getElementById('got'),myCursor); }
                } // end insert cursor
    
    function doGetCaretPosition (ctrl) { var CaretPos = 0;
        if (document.selection) { ctrl.focus (); // IE Support
        var Sel = document.selection.createRange ();
        Sel.moveStart ('character', -ctrl.value.length);
            CaretPos = Sel.text.length; }
                return (CaretPos); }
    
    function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus();
            ctrl.setSelectionRange(pos,pos); }
        else if (ctrl.createTextRange) { var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select(); }}
    
    function format0(format1, format2, format3) {
            myCursor = doGetCaretPosition(document.getElementById('got'));
            var text = prompt('Enter text to format: ' + format3);
                if (text != null) {
            insertAtCursor(document.REPLYFORM.get, format1 + text + format2);}
                else {return;}}
        </script>
    
          </head><body>
    <BR><BR>    
        <form method=POST name=REPLYFORM action=style_page.php?act=save>
    <a class=but href="javascript:format0('<B>', '</B>', 'BOLD');">BOLD</a>
          <P>
    <textarea id="got" name="get" rows="2" cols="51">This is a small box to force the scroll bar so that the problem is quite apparent. It all works just fine and dandy but... and ain't there always a 'but' - as in butt in or butt out or butt er. Blah blah blah.</textarea>
    
    </form>
    </body></html>


  •  

    Posting Permissions

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