Javascript 如何通过jQuery在按键事件期间获取HTML文本输入的新值?

Javascript 如何通过jQuery在按键事件期间获取HTML文本输入的新值?,javascript,html,jquery,keypress,jquery-events,Javascript,Html,Jquery,Keypress,Jquery Events,我只能在没有新按下的键的情况下检索该值。使用keyup事件不是一个选项,因为如果用户不释放密钥,它不会触发。这一点很重要,因为我想对每一个按键进行操作 将旧值与可从事件参数访问的keyCode组合也是不可接受的,因为不能保证用户将在文本框中键入字符串的末尾。将处理程序代码包装在setTimeout(function(){…},0)中 这将在更新值后,在下一个消息循环中执行代码。以下是一个可行的想法。使用按键并在该点存储val,以便始终可以将当前值与上一个值进行比较,并找出字符串中的差异。差异将是

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


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

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


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

以下是一个可行的想法。使用按键并在该点存储val,以便始终可以将当前值与上一个值进行比较,并找出字符串中的差异。差异将是按下的键

一种方法是将字符串转换为数组,并像这里一样比较两个数组:


从未尝试过类似的操作,因此可能不可行,但可能值得一试。

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

我对TAB键有一个特殊的例子,它改变了keyUp中的e.target,这就是解决方案——绑定到容器元素,在keyDown处理程序中获取目标输入,订阅keyUp并读取值

$("#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
   });
});

在输入字段上使用更改事件怎么样?更改事件只有在输入字段失去焦点时才会发生,因此无法工作。在使用Bacon.js一点之后,我会用它完全解决这个问题,但这样我就失去了阻止事件发生的机会。然而,如果我结合Jeff T的建议,如果发现输入无效,我可以将其值回滚到以前的状态。不过,我仍然愿意接受其他想法。如果您希望能够回滚到以前的状态,可以在输入setTimeout之前保存该值,如果您发现需要回滚,可以返回该值。更新的JSFIDLE here:尝试输入'xx'以查看工作中的回滚。@Ender:我修改了您的代码并发现了一个有趣的问题:如果您连续按住某个键足够长的时间,某些键最终会“退出”,因此它们将出现,而不管它们是否应该在下一个消息循环中被删除。我猜这是因为下一个按键事件发生在前一个按键设置超时回调之前。相关示例:(按住字母“i”一段时间)@kahoon-Ha!没错。经过一番思考,我想出了一个解决问题的办法。将oldVal转换为全局(或至少半全局)变量,并在keydown事件中更新它,而不是在keypress开始时更新。使用这个,我按住一个键至少一分钟,没有“逃犯”。在这里修改了您的JSFIDLE:谢谢,这是最接近我想要实现的。但一个主要问题是:它仍然不能防止将任意数据复制和粘贴到input.OK中。你在问题中没有提到这一点。在大多数浏览器中,您可以通过一个简单的
document.getElementById(“您的输入”).onpaste=function(){return false;}。Firefox2和我认为所有版本的Opera都不支持粘贴事件。我对其进行了一些修改,将其设置为一个独立函数,将事件作为参数并返回预期的新值,但我猜stackoverflow不允许我将其粘贴到这里@RobertMacGrogan:您可以从注释中链接到JSFIDLE或类似文件。