Question

假设您有一个textarea和一个按钮，并且只要单击该按钮，您就希望该按钮在textarea中获取插入符号的位置。（我知道，从文本区域到按钮会失去焦点。）

有没有办法回忆插入符号在textarea中的位置？如果是这样，那么如何做到这一点（例如，他们可以将按钮写入该区域的按钮）？

Answer 1

此解决方案可能对您有所帮助。你可以试试，

<html>
    <head>
      <title>Get/Set Caret in Textarea Example</title>
      <script>
          function doGetCaretPosition (ctrl) {
              var CaretPos = 0;
              // IE Support
             if (document.selection) {
                 ctrl.focus ();
                 var Sel = document.selection.createRange ();
                 Sel.moveStart ('character', -ctrl.value.length);    
                 CaretPos = Sel.text.length;
             }
             // Firefox support
             else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                 CaretPos = ctrl.selectionStart;
             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 process()
        { 
            var no = document.getElementById('no').value;
            setCaretPosition(document.getElementById('get'),no);
        }
    </script>
</head>
<body>
    <textarea id="get" name="get" rows="5" cols="31">Please write some integer in the textbox given below and press "Set Position" button. Press "Get Position" button to get the position of cursor.</textarea>
    <br>
    Enter Caret Position: <input type="text" id="no" size="1" /><input type="button" onclick="process();" value="Set Position">
    <BR>
    <input type="button" onclick="alert(doGetCaretPosition(document.getElementById('get')));"
            value="Get Position">
   </body>
</html>

来源：http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/

Answer 2

在失去焦点时获得插入符号的位置：

var caretStart, caretEnd;

$('#textarea').on('blur', function(e) {
    caretStart = this.selectionStart;
    caretEnd = this.selectionEnd;
});

单击按钮时写入文本：

 $('#btnWriteText').on('click', function(e) {
    var text = " Example ";
    var $this = $('#textarea');

    // set text area value to: text before caret + desired text + text after caret
    $this.val($this.val().substring(0, caretStart)
              + text
              + $this.val().substring(caretEnd));

    // put caret at right position again
    this.selectionStart = this.selectionEnd = caretStart + text.length;
 });

单击时在textarea中获取插入符号的位置

2 个答案: