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

Question

Suppose you have a textarea and a button, and that you wanted that button to get the position of the caret in a textarea, whenever that button was clicked. 假设您有一个textarea和一个按钮，并且只要单击该按钮，您就希望该按钮在textarea中获取插入符号的位置。 (I know, there would be a loss of focus from the text area to the button.) （我知道，从文本区域到按钮会失去焦点。）

Is there a way to recall where the caret was in the textarea? 有没有办法回忆插入符号在textarea中的位置？ If so, how would one go about doing that (so that they could, for example, have said button write text to that area)? 如果是这样，那么如何做到这一点（例如，他们可以将按钮写入该区域的按钮）？

Answer 1

This solution may help you. 此解决方案可以帮助您。 You can try out, 你可以尝试一下，

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

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

Answer 2

Get the position of caret when it loses focus: 当它失去焦点时获得插入符号的位置：

var caretStart, caretEnd;

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

To write text when a button was click: 单击按钮时写入文本：

 $('#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 个解决方案

解决方案1
2 已采纳 2015-02-20 01:59:36

解决方案2
2 2016-01-27 08:51:36

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-02-20 01:59:36

解决方案2 2 2016-01-27 08:51:36

解决方案1
2 已采纳 2015-02-20 01:59:36

解决方案2
2 2016-01-27 08:51:36