您的位置：首页 > 其它

将光标定位于输入框最右侧的实现方式

2016-03-29 15:38 246 查看

这个方法setCursorPosition需要使用两个原生API

setSelectionRange
createTextRange

<html>
<head>
<title></title>
<script src="./js/jquery-2.2.2.min.js"></script>
</head>
<body>
<input type="text" id="test" />

<script>
(function($, undefined) {
$.fn.getCursorPosition = function() {
var el = $(this).get(0);
var pos = 0;
if ('selectionStart' in el) {
pos = el.selectionStart;
} else if ('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
};

$.fn.setCursorPosition = function(option) {
var settings = $.extend({
index: 0
}, option);
return this.each(function() {
var elem  = this;
var val   = elem.value;
var len   = val.length;
var index = settings.index;

// 非input和textarea直接返回
var $elem = $(elem);
if (!$elem.is('input,textarea')) {
return;
}
// 超过文本长度直接返回
if (len < index) {
return;
}

setTimeout(function() {
elem.focus()
if (elem.setSelectionRange) { // 标准浏览器
elem.setSelectionRange(index, index)   ;
} else { // IE9-
var range = elem.createTextRange();
range.moveStart("character", -len);
range.moveEnd("character", -len);
range.moveStart("character", index);
range.moveEnd("character", 0);
range.select();
}
}, 10);
});
};
})(jQuery);

$("#test").on("focus", function(){
var pos = $(this).getCursorPosition();
$(this).setCursorPosition({index:$(this).val().length});
});
</script>
</body>
</html>

Source:
http://www.uncletoo.com/html/jsjquery/755.html http://www.cnblogs.com/snandy/p/4112488.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航