欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-01 20:46:59
如何使用jquery在文本框中设置光标位置?我有一个带有内容的文本字段,并且我希望光标在焦点位于特定的偏移位置,该如何实现呢? 实现方法一: 这是一个jquery解决方...

如何使用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);

这篇文章就介绍到这了,希望大家以后多多支持。