Question

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

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

...但由于某种原因，我无法弄清楚如何获取输入文本的值。我尝试过使用$(this).text和event.target，但我收到了很多undefined个帖子。我没有遇到过这种方式的其他事件，所以我必须遗漏一些基本的东西。我错过了什么？

Answer 1

试试这个代码段。

$(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>

Answer 2

您正在使用keydown ，这意味着密钥已关闭，当然且标记尚未更新。为什么？因为如果你愿意，你可以拒绝该字符（例如，你可以避免用户输入字母以获得数字字段）。所以，你需要处理keyup事件，因为在那时，该字段已经设置好了，你将能够使用text属性获得valud。

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

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

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

2 个答案: