当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于jQuery实现的设置文本区域的光标位置

基于jQuery实现的设置文本区域的光标位置

2018年08月12日  | 移动技术网IT编程  | 我要评论

如何使用jquery在文本框中设置光标位置？我有一个带有内容的文本字段，并且我希望光标在焦点位于特定的偏移位置，该如何实现呢？

实现方法一：

这是一个jquery解决方案：

$.fn.selectrange = function(start, end) {
 if(end === undefined) {
 end = start;
 }
 return this.each(function() {
 if('selectionstart' in this) {
  this.selectionstart = start;
  this.selectionend = end;
 } else if(this.setselectionrange) {
  this.setselectionrange(start, end);
 } else if(this.createtextrange) {
  var range = this.createtextrange();
  range.collapse(true);
  range.moveend('character', end);
  range.movestart('character', start);
  range.select();
 }
 });
};

有了这个，你可以做

$('#elem').selectrange(3,5); // select a range of text
$('#elem').selectrange(3); // set cursor position

实现方法二：

$.fn.setcursorposition = function(position){
 if(this.length == 0) return this;
 return $(this).setselection(position, position);
}

$.fn.setselection = function(selectionstart, selectionend) {
 if(this.length == 0) return this;
 input = this[0];

 if (input.createtextrange) {
 var range = input.createtextrange();
 range.collapse(true);
 range.moveend('character', selectionend);
 range.movestart('character', selectionstart);
 range.select();
 } else if (input.setselectionrange) {
 input.focus();
 input.setselectionrange(selectionstart, selectionend);
 }

 return this;
}

$.fn.focusend = function(){
 this.setcursorposition(this.val().length);
  return this;
}

现在，您可以通过调用以下任何元素将焦点移至任何元素的结尾

$(element).focusend();

方法三

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

调用办法：

setcarettopos(document.getelementbyid("yourinput"), 4);

jquery中文本域光标操作（选中、添加、删除、获取）

1、获取光标位置：$(elem).igetfieldpos()；
2、设置光标位置：$(elem).iselectfield(start)；
3、选中指定位置内的字符：$(elem).iselectfield(start,end)；
4、选中指定的字符：$(elem).iselectstr(str)；
5、在光标之后插入字符串：$(elem).iadd(str)；
6、删除光标前面（-n）或者后面（n）的n个字符：$(elem).idel(n)；

这篇文章就介绍到这了，希望大家以后多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网