Javascript 对 input setValue 后,保留光标的原始位置

阅读(3711)

对 <input> 设置value后,光标会自动定位到最后面。

但某些场景下需要对每次输入做处理的,同时想要保持原有位置的,可以通过 setSelectionRange 来解决,如:


$("#kaifage").keypress(function(){
    // 获取当前的光标位置
    var cursorStart = this.selectionStart,
        cursorEnd = this.selectionEnd;

    // 对元素进行设值操作
    $(this).val( $(this).val().toUpperCase() );

    // 恢复原有位置
    this.setSelectionRange(cursorStart, cursorEnd);
});

需要注意的是,如果操作改变了输入值的长度,那么需要对记录的光标位置做同样的偏移。

参考:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.setSelectionRange
http://msdn.microsoft.com/en-us/library/ie/ff975167(v=vs.85).aspx

Tags: