单击时获取文本区域中插入符号的位置

Getting the position of the caret in textarea on click

本文关键字：插入 符号 位置 区域 获取 取文本 单击      更新时间：2024-01-26

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

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

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

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;
 });

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

<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/

相关文章：