设置输入域(input/textarea)中文本光标的位置

以前记录了一篇 将光标定位于输入框最右侧的实现方式 ，实现光标定位在文本的最末。这种需求往往在修改现有的文本。有时可能还需要把光标定位在首位，或者中间某个位置，这就需要实现一个更通用的方法。

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

setSelectionRange

createTextRange

原生JS实现

/*
* 设置输入域(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插件

$.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

createRange method

http://w3help.org/zh-cn/causes/SD9031

/article/4664381.html