設置輸入域(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