设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ，实现光标定位在文本的最末。这种需求往往在修改现有的文本。有时可能还需要把光标定位在首位，或者中间某个位置，这就需要实现一个更通用的方法。
这个方法setCursorPosition需要使用两个原生API
原生JS实现
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* * 设置输入域(input/textarea)光标的位置 * @param {HTMLInputElement/HTMLTextAreaElement} elem * @param {Number} index */function setCursorPosition(elem, index) { var val = elem.value var len = val.length // 超过文本长度直接返回 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插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
$.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) }) } |
线上示例：http://snandy.github.io/lib/func/setCursorPosition.html
相关：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.setSelectionRange
http://w3help.org/zh-cn/causes/SD9031
http://www.cnblogs.com/snandy/archive/2012/04/21/2459071.html
