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

设置输入域(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

http://www.cnblogs.com/snandy/archive/2012/04/21/2459071.html