Results 1 to 4 of 4

Thread: [RESOLVED] Get the position of the cursor in a textarea

  1. #1

    Thread Starter
    Member PBertie's Avatar
    Join Date
    Aug 2011
    Location
    Newcastle Upon Tyne
    Posts
    55

    Resolved [RESOLVED] Get the position of the cursor in a textarea

    Hi,
    I've done the following code to place formatting tags around code in a textarea. It works perfect in Firefox but in IE it only works if some text is selected.

    How do I get the positon of the cursor if no text is selected?

    HTML Code:
    <script type="text/javascript">
    //<![CDATA[
      
      function ApplySimpleTag(tagCode) {
        var selText = "";
        var beforeText = "";
        var afterText = "";
        var newSelStart = 0;
        var commentBox = objById('pbertie_CommentBox');
        var StartTag = '[' + tagCode + ']';
        var EndTag = '[/' + tagCode + ']';
        
        if (commentBox.selectionStart) {
          // check whether some text is selected in the textarea
          
          beforeText = commentBox.value.substring(0, commentBox.selectionStart);
          afterText = commentBox.value.substring(commentBox.selectionEnd);
          newSelStart = commentBox.selectionStart + StartTag.length;
          if (commentBox.selectionStart != commentBox.selectionEnd) {
            selText = commentBox.value.substring(commentBox.selectionStart, commentBox.selectionEnd);
          }
          commentBox.value = beforeText + StartTag + selText + EndTag + afterText;
          
          if(commentBox.setSelectionRange) {
              commentBox.setSelectionRange(newSelStart, newSelStart + selText.length);
          }
          else if (commentBox.createTextRange) {
            var selRange = commentBox.createTextRange();
            selRange.collapse(true);
            selRange.moveStart("character", newSelStart);
            selRange.moveEnd("character", selText.length);
            selRange.select();
          }
          
        }
        else {
          var textRange = document.selection.createRange();
          
          if (textRange.parentElement() === commentBox) { // Fails this check is the selected length is zero.
            textRange.text = StartTag + textRange.text + EndTag;
          }
        }
        
        commentBox.focus();
      }
    // ]]>
    </script>
    <textarea class="pbertie_EditorTextarea" id="pbertie_CommentBox"></textarea>

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Get the position of the cursor in a textarea

    Inserting this one line made it work properly for me:
    Code:
        else {
          commentBox.focus();
          var textRange = document.selection.createRange();

  3. #3
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Get the position of the cursor in a textarea

    From https://developer.mozilla.org/en/DOM...extAreaElement

    selectionStart

    The index of the beginning of selected text. [HTML5] If no text is selected, contains the index of the character that follows the input cursor. On being set, the control behaves as if setSelectionRange() had been called with this as the first argument, and selectionEnd as the second argument.
    This is also listed in the HTML5 spec at http://www.w3.org/TR/html5/associati...selectionstart.

    The selectionStart attribute must, on getting, return the offset (in logical order) to the character that immediately follows the start of the selection. If there is no selection, then it must return the offset (in logical order) to the character that immediately follows the text entry cursor.
    Not sure how many browsers implement this yet.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  4. #4

    Thread Starter
    Member PBertie's Avatar
    Join Date
    Aug 2011
    Location
    Newcastle Upon Tyne
    Posts
    55

    Re: Get the position of the cursor in a textarea

    Quote Originally Posted by SambaNeko View Post
    Inserting this one line made it work properly for me:
    Code:
        else {
          commentBox.focus();
          var textRange = document.selection.createRange();
    Cheers thats sorted it. I did see a post mentioning something similar about using the onmousedown event but didn't try it. Bit weird how the focus doesn't matter when there's at least one character selected

Tags for this Thread

Posting Permissions

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



Click Here to Expand Forum to Full Width