如何通过jQuery在keypress事件期间获取HTML文本输入的NEW值?

时间:2010-08-11 23:00:15

标签: javascript jquery html javascript-events keypress

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

将旧值与可从事件参数访问的keyCode组合也是不可接受的,因为不能保证用户将在文本框中键入字符串的末尾。

4 个答案:

答案 0 :(得分:6)

将处理程序代码包裹在setTimeout(function() { ... }, 0)

这将在value更新后执行下一个消息循环中的代码。

答案 1 :(得分:2)

可以计算出按键后的值。它在非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) {
            // 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);
    }
};

答案 2 :(得分:1)

这是一个可能有用的想法。使用按键并在该点存储val,这样您始终可以将当前值与最后一个值进行比较,并找出字符串中的差异。差异将是被按下的关键。

执行此操作的一种方法是将字符串转换为数组并比较它们在此处执行的2个数组:JavaScript array difference

从未尝试过这样的事情,因此它可能不可行但可能值得一试。

答案 3 :(得分:0)

我有一个TAB键的特定情况,它改变了keyUp中的e.target,以便解决方案 - 绑定到容器元素,在keyDown处理程序中获取目标输入,订阅keyUp并读取值。 / p>

$("#container").keydown(function (e) {
   //here you decide whether to handle the key event, and grab the control that sent the event 
   var myInput = e.target;
   $("#container").one('keyup', function() {
      console.log(myInput.val());  
      // do smth here
   });
});