如何在 jQuery 的按键事件中获取全部值？

Question

我正在写一些 jQuery 拦截在输入字段中输入的值并确定是允许还是阻止键入的值。

我需要获取下一个值，即，如果我允许按键，该值将是多少，我需要在之前的某个时刻知道这个值它已显示，所以我正在使用 keypress 事件。

我的问题是：在 keypress 事件中，如果我允许按键，我如何知道结果值是多少？什么是“潜在价值”？

如果我将按键事件对象写到控制台并检查属性，我可以看到 currentTarget.value 显示此 'potential value'。但是，如果我在 keypress 事件中使用这个属性那么它 returns 只是上下文按键之前的值。

例如，如果用户在绑定到以下 jQuery

的空文本框中键入 "a"

$(":input").on("keypress", function(e) {
    console.log(e);
    console.log(e.currentTarget.value);
});

深入了解第一个控制台输出 (e) 表明 currentTarget.value = "a".

但是第二个控制台输出（e.currentTarget.value）将显示“”。

如果用户随后在同一个文本框中键入 "b"，则：手动检查 e 并定位 currentTarget.value 显示 "ab"；从事件内部转储 e.currentTarget.value 显示 "a".

谁能解释一下我如何在 keypress 活动中获得这个“潜在价值”？

Answer 1

不是最漂亮的解决方案（你可以在恢复之前看到结果），但为了省去区分 arrow/control 和输入键等的麻烦，你可以将原始值存储在 keypress 并在需要时恢复到 keyup 中的状态（还存储选择位置以进行完全恢复）

$(":input").keypress(function(e) {
    $(this).data('orgValue', {value: this.value, pos: this.selectionStart, selend:this.selectionEnd});
}).keyup(function(e){
    var val = this.value;
    if(!somevalidation(val)){
        var org =$(this).data('orgValue');        
        this.value = org.value;
        this.selectionStart = org.pos;
        this.selectionEnd = org.selend;
    }
});

示例fiddle

编辑

做了一些测试，但是 jquery 使得预测结果相对容易。它不仅填充键属性，它还填充事件的其他属性，在这些属性上可以检查键的类型。虽然测试 'non input' 键的 charCode 似乎为 0。直接的是：

$(":input").keypress(function(e) {
    if(!e.charCode)return; //is 0 for non input
    var cur = this.value; //current value
    var val = cur.substring(0,this.selectionStart)
        + e.key
        + cur.substring(this.selectionEnd);     
    return cur=== val //unchanged
        || somevalidation(val);        
});

但这不包括 deletes/backspaces，要同时处理这些问题：

$(":input").keypress(function(e) {
    var key,start = this.selectionStart ,end = this.selectionEnd;
    if(e.charCode)
        key = e.key;
    else{
        if(e.keyCode===8 || e.keyCode===46){
            key = '';
            if(end===start){
                if(e.keyCode===8)
                    start--;
                else
                    end++;
            }
        }
        else
            return true; //charCode is 0 for non input 46 = delete 8 = backspace
    }
    var cur = this.value; //current value
    var val = cur.substring(0, start) + key + cur.substring(end);     
    return cur=== val //unchanged
        || somevalidation(val);        
});

Fiddle

测试时这似乎符合预期。另一种方法可能是有一个隐藏的输入字段，将键发送到那里并检查其结果，但上面的方法应该可以解决问题。

如何在 jQuery 的按键事件中获取全部值？

How to obtain full value inside jQuery's keypress event?

javascript

jquery

keypress

jquery-events