javascript - jQuery 文本框设置鼠标指针

  显示原文与译文双语对照的内容

如何使用jQuery在文本字段中设置光标位置? field,上的我有一个文本字段与内容,我希望用户的光标将定点于一定的偏移量当他们中心元素展开 代码应该类似于:


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

setCursorPosition函数的实现是什么样子的? 如果你有一个文本字段中的光标被定位为 follows, abcdefg,这里调用将result:的内容一并 abcd* |

Java具有类似的功能,setCaretPosition 。 是否有类似的方法用于 javascript?

更新:我修改了cms的代码以使用 jQuery,如下所示:


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

时间:

我有两个功能:


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:


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

下面是一个jQuery解决方案:


$.fn.selectRange = function(start, end) {
 if(!end) end = start; 
 return this.each(function() {
 if (this.setSelectionRange) {
 this.focus();
 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

JsFiddle示例

这里的解决方案是正确的,除了jQuery扩展代码。

扩展函数应该遍历每个选中的元素并返回 this 以支持链接。 这里是 iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 正确的版本:


$.fn.setCursorPosition = function(pos) {
 this.each(function(index, elem) {
 if (elem.setSelectionRange) {
 elem.setSelectionRange(pos, pos);
 } else if (elem.createTextRange) {
 var range = elem.createTextRange();
 range.collapse(true);
 range.moveEnd('character', pos);
 range.moveStart('character', pos);
 range.select();
 }
 });
 return this;
};

我找到了一个适合我的解决方案:


$.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();

这对我在macosx上的Safari 5上工作,jQuery 1.4:


$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;

对我在 bitbucket 中发现的代码稍作修改

如果给定 2个位置,代码现在可以用起始/结束点选择/突出显示。 在 FF/Chrome/IE9/Opera. 中测试并工作良好


$('#field').caret(1, 9);

下面列出了代码,只更改了几行:


(function($) {
 $.fn.caret = function(pos) {
 var target = this[0];
 if (arguments.length == 0) {//get
 if (target.selectionStart) {//DOM
 var pos = target.selectionStart;
 return pos> 0? pos : 0;
 }
 else if (target.createTextRange) {//IE
 target.focus();
 var range = document.selection.createRange();
 if (range == null)
 return '0';
 var re = target.createTextRange();
 var rc = re.duplicate();
 re.moveToBookmark(range.getBookmark());
 rc.setEndPoint('EndToStart', re);
 return rc.text.length;
 }
 else return 0;
 }

//set
 var pos_start = pos;
 var pos_end = pos;

 if (arguments.length> 1) {
 pos_end = arguments[1];
 }

 if (target.setSelectionRange)//DOM
 target.setSelectionRange(pos_start, pos_end);
 else if (target.createTextRange) {//IE
 var range = target.createTextRange();
 range.collapse(true);
 range.moveEnd('character', pos_end);
 range.moveStart('character', pos_start);
 range.select();
 }
 }
})(jQuery)

只记得 return false 该函数调用后立即如果你使用的是方向键因为 Chrome fricks frack起来否则。


{
 document.getElementById('moveto3').setSelectionRange(3,3);
 return false;
}

...