如何通过jQuery获得按键事件期间HTML文本输入的新值? [英] How can I get the NEW value of an HTML text input during a keypress event via jQuery?

查看:140
本文介绍了如何通过jQuery获得按键事件期间HTML文本输入的新值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我只能在没有新按下的键的情况下检索该值。使用keyup事件不是一个选项,因为如果用户没有释放密钥它不会触发。这一点很重要,因为我想对每一个按键都采取行动。

将旧值与可从事件参数中获得的keyCode结合起来也是不可接受的,因为它是不保证用户将输入到文本框中的字符串末尾。

解决方案

可以计算出什么值将在按键之后。在非IE浏览器中很容易,而在IE中更复杂,但以下内容可以实现:

  document.getElementById(your_input ).onkeypress = function(evt){
var val = this.value;
evt = evt || window.event;
var charCode = typeof evt.which ==number? evt.which:evt.keyCode;
if(charCode){
var keyChar = String.fromCharCode(charCode);
var start,end;
if(typeof this.selectionStart ==number&& typeof this.selectionEnd ==number){
start = this.selectionStart;
end = this.selectionEnd;
} else if(document.selection&& document.selection.createRange){
//对于版本8以前的版本
var selectionRange = document.selection.createRange();
var textInputRange = this.createTextRange();
var precedingRange = this.createTextRange();
var bookmark = selectionRange.getBookmark();
textInputRange.moveToBookmark(bookmark);
precedingRange.setEndPoint(EndToStart,textInputRange);
start = precedingRange.text.length;
end = start + selectionRange.text.length;
}
var newValue = val.slice(0,start)+ keyChar + val.slice(end);
alert(newValue);
}
};


I can only retrieve the value without the newly pressed key. Using the keyup event isn't an option, because it does not fire if the user doesn't release the key. This is important because I want to act upon every single keypress.

Combining the old value with the keyCode that is reachable from the event's arguments isn't acceptable either, because it's not guaranteed that the user will type to the end of the string in the textbox.

解决方案

It's possible to work out what the value will be after the keypress. It's easy in non-IE browsers and trickier in IE, but the following will do it:

document.getElementById("your_input").onkeypress = function(evt) {
    var val = this.value;
    evt = evt || window.event;
    var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
    if (charCode) {
        var keyChar = String.fromCharCode(charCode);
        var start, end;
        if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
            start = this.selectionStart;
            end = this.selectionEnd;
        } else if (document.selection && document.selection.createRange) {
            // For IE up to version 8
            var selectionRange = document.selection.createRange();
            var textInputRange = this.createTextRange();
            var precedingRange = this.createTextRange();
            var bookmark = selectionRange.getBookmark();
            textInputRange.moveToBookmark(bookmark);
            precedingRange.setEndPoint("EndToStart", textInputRange);
            start = precedingRange.text.length;
            end = start + selectionRange.text.length;
        }
        var newValue = val.slice(0, start) + keyChar + val.slice(end);
        alert(newValue);
    }
};

这篇关于如何通过jQuery获得按键事件期间HTML文本输入的新值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆