从 contenteditable <p> w/ jquery 获取按键上的文本

Question

我有一个 <p class="task-name" contenteditable>，我想在用户进行一些编辑后按回车键时从中获取文本。我已经处理了事件...

$(document).on('keypress', 'p.task-name', function(event) {
    if(event.which == 13) {
}

...但出于某种原因，我不知道如何获取输入文本的值。我试过使用 $(this).text 和 event.target，但我得到了很多 undefined。我没有以这种方式处理其他事件，所以我一定遗漏了一些基本的东西。我错过了什么？

Answer 1

您正在使用keydown，这意味着按键已按下，当然并且标签尚未更新。为什么？因为您可以根据需要拒绝该字符（例如，您可以避免用户输入字母以获得数字字段）。因此，您需要改为处理 keyup 事件，因为此时字段已经设置，您将能够使用文本属性.[=11 获取值=]

如果你想拒绝用户输入的字符，你应该使用keydown事件。然后你获取 keyup 事件的值。

为了避免由 contenteditable 创建的 DIV，请参阅此答案：Prevent contenteditable adding <div> on ENTER - Chrome

Answer 2

试试这个片段。

$(document).ready( function() {
    $('.x').on('keyup', function(event) {
        if (event.keyCode === 13) {
            console.log($(this).text());
        }
    });
});

.x {
    height:100px;
    width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p class="x" contenteditable>Dummy text</p>

从 contenteditable <p> w/ jquery 获取按键上的文本

Get text on keydown from contenteditable <p> w/ jquery

jquery

contenteditable