在按键事件期间检测未来的文本

Question

我有一个可编辑的 div，我需要将输入的文本与其在键入最新键之前的内容进行比较。

例如： 上一篇： 布米 新文本：Bhumik

这里正在输入K，我应该知道内容已更改。此检测需要在 keyPress 事件上完成。

但是，当我在每次按键时 console.log div 的 html 时，最终的 console.log 是“Bhumi”，即。在“k”按键上，内容仍然没有注册 K。这仅在 keyup 上添加。无论如何，我可以检测到未来的内容可能是什么，这样在每次按键时我都会得到我在按键上想要的内容？？？

另外，我处理的不仅仅是一行，而是多行。

编辑::: 我不仅仅需要输入的字符。假设我有 10 行，我可以在每次按键时预测按键时一行的最终内容，然后通过将之前的文本与未来预测的文本进行比较，我可以知道用户当前正在哪一行输入。

Answer 1

您可以从事件对象中读取按下的按键。

var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
    //Do something
}

（参见 jQuery 事件按键：按下了哪个键？）

Answer 2

试试这个代码..

$("#divId").keypress(function (e) {
            var keycode = e.keycode ? e.keycode : e.which;         
              }
        });

您可以使用 keypress 、keydown 或 keyup 。有关 Javascript 键事件的更多信息，请单击 此处

Answer 3

您可以尝试使用

.on()

处理程序处理多个嵌套按键事件：

$('div').on('keypress keyup keydown', function(){
   console.log($(this).text());
});

Answer 4

您可以通过获取新字符将被插入的位置来生成未来值：

$('input').bind('keypress',function (){
    var value = e.target.value,
        idx = e.target.selectionStart,
        key = e.key;
        value =  value.slice(0, idx) + key + value.slice(idx + Math.abs(0));
    return yourfunction(value);
});

Answer 5

我遇到了类似的问题，我需要获得用户按键生成的正确值以正确评估它，所以我从这里的其他答案中学习并编写了自己的答案。

function getNewValue(evt) {
    var start = evt.target.selectionStart,
        end = evt.target.selectionEnd,
        charCode = (evt.which) ? evt.which : evt.keyCode,
        original = $(evt.target).val(),
        char = String.fromCharCode(charCode),
        newer = "", inserted = false, single = 0;
    
    if (start == end) single = 1;

    if (original.length > 0) {
        for (var i = 0; i < original.length; i++) {
            if (!inserted) {
                if (single && i == start) {
                    newer += char + original[i];
                    inserted = true;
                } else if (!single && i == start) {
                    newer += char; inserted = true;
                } else
                    newer += original[i];
            } else {
                if (single)
                    newer += original[i];
                else if (i < start || i >= end)
                    newer += original[i];
            }
        }
        if (!inserted) newer += char;
    } else newer += char;

    console.log("newer: " + newer);
    // You can add conditions here to evaluate "newer".
    // Use "return false" to reject "newer".
}

我通过将以下内容添加到我想要评估的 HTML 元素来使用此函数：

onkeypress="return getNewValue(event)"

我没有遇到任何问题，但如果我找到更好的替代方案或发现任何问题，我会更新此答案。