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

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

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

原生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

秒客网

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

相关文章