jQuery在文本区域设置光标位置 [英] jQuery Set Cursor Position in Text Area

问题描述

如何使用jQuery在文本字段中设置光标位置？我有一个包含内容的文本字段，并且我希望用户光标在焦点位于特定的偏移位置。代码应该看起来像这样：

  $（'＃input'）。focus（function（）{
 $（this）.setCursorPosition（4）; 
}）; 
  

该setCursorPosition函数的实现是什么样的？如果您的文本字段的内容为abcdefg，则此调用将导致光标的位置如下所示：abcd ** | ** efg。

Java有类似的函数，setCaretPosition。

更新：我修改了CMS的代码以使用jQuery，如下所示：

 新函数（$）{
 $ .fn.setCursorPosition = function（pos）{
 if（this.setSelectionRange）{
 this.setSelectionRange（pos，pos）; 
} else if（this.createTextRange）{
 var range = this.createTextRange（）; 
 range.collapse（true）; 
 if（pos <0）{
 pos = $（this）.val（）。length + pos; 
} 
 range.moveEnd（'character'，pos）; 
 range.moveStart（'character'，pos）; 
 range.select（）; 
} 
} 
}（jQuery）; 
  

解决方案

我有两个函数：

 函数setSelectionRange（input，selectionStart，selectionEnd）{
 if（input.setSelectionRange）{
 input.focus（）; 
 input.setSelectionRange（selectionStart，selectionEnd）; 
} 
 else if（input.createTextRange）{
 var range = input.createTextRange（）; 
 range.collapse（true）; 
 range.moveEnd（'character'，selectionEnd）; 
 range.moveStart（'character'，selectionStart）; 
 range.select（）; 
 
 
 
函数setCaretToPos（input，pos）{
 setSelectionRange（input，pos，pos）; 
} 
  

然后你可以像这样使用setCaretToPos：

  setCaretToPos（document.getElementById（YOURINPUT），4）; 
  

同时使用 textarea 和 input ，显示jQuery使用情况： $ b

  function setSelectionRange（input，selectionStart，selectionEnd）{if（input.setSelectionRange）{input.focus（）; input.setSelectionRange（selectionStart，selectionEnd）; } else if（input.createTextRange）{var range = input.createTextRange（）; range.collapse（真）; range.moveEnd（'character'，selectionEnd）; range.moveStart（'character'，selectionStart）; range.select（）; }} function setCaretToPos（input，pos）{setSelectionRange（input，pos，pos）;} $（＃set-textarea）。click（function（）{setCaretToPos（$（＃the-textarea）[0] ，10）}）; $（＃set-input）。click（function（）{setCaretToPos（$（＃the-input）[0]，10）;}）;  
 < textarea id =the-textareacols =40rows =4 > Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 < / textarea>< br>< input type =buttonid =set-textareavalue =在textarea中设置 < br>< input id =the-inputtype =textsize =40value =Lorem ipsum dolor sit amet，consectetur adipiscing elit>< br>< input type = buttonid =set-inputvalue =在输入中设置>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js >< / script>  

并在Chrome，Firefox，IE11，甚至IE8上工作（请参阅上次此处; Stack Snippets不支持IE8） 。

How do you set the cursor position in a text field using jQuery? I've got a text field with content, and I want the users cursor to be positioned at a certain offset when they focus on the field. The code should look kind of like this:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

What would the implementation of that setCursorPosition function look like? If you had a text field with the content abcdefg, this call would result in the cursor being positioned as follows: abcd**|**efg.

Java has a similar function, setCaretPosition. Does a similar method exist for javascript?

Update: I modified CMS's code to work with jQuery as follows:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

解决方案

I have two functions:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

Then you can use setCaretToPos like this:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

Live example with both a textarea and an input, showing use from jQuery:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

As of 2016, tested and working on Chrome, Firefox, IE11, even IE8 (see that last here; Stack Snippets don't support IE8).

这篇关于jQuery在文本区域设置光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！