折雨的天空

新浪微薄腾讯微薄

最新碎语:最近霉到了住。哎。。。

您的位置:折雨的天空 >其他技术> JS控制input框的光标位置

JS控制input框的光标位置

我的应用是在input输入数字金额的时候,自动转为浮点数,那么光标需要定位到小数点前面。

文章中的源码需要稍微修改后,才能适用于各种项目环境。


原文地址:

http://www.cnblogs.com/snandy/p/4112488.html


以下内容为原文备份:


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

------------正 文 已 结 束, 感 谢 您 的 阅 读 (折雨的天空)--------------------

转载请注明本文标题和链接:《JS控制input框的光标位置

奖励一下

取消

分享不易,烦请有多多打赏,如您也困难,点击右边关闭即可!

扫码支持
扫码打赏,5元,10元,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

-秒后自动关闭,如已打赏,或者不愿打赏,请点击右上角关闭图标。

发表评论

路人甲 表情
看不清楚?点图切换