Question

我有一个可编辑的<p>，其中用户添加评论...当用户点击输入时，他们的评论被提交并发布在评论中......它的工作相当不错但问题是当输入是按下光标首先移动到新行然后它被发布（在评论发布之前看一下屏幕截图，光标在新行中显示几毫秒）。这是我的代码：

$(document).on('keyup','.addComment',function(e) {

if (e.which == 13 && e.shiftKey!==true) {
    var id = $(this).attr('id').match(/\d+/);
    var p_id = Number(id);
    var comment_box = '#comment_box_'+id;
    var content = $(comment_box).text();
    content = content.replace(/\n/g, '<br>');

    if (content.length > 0) {
        $.ajax({
            type : 'POST',
            url  : 'update.php',
            data: ({content: content , id: p_id, act: "add_cmnt"}),
            success : function()
            {
                update_ca("comment_area_"+id);
                $(comment_box).text("");
            }
        }); // End of Ajax
    }
}

});

现在我想要的是当用户点击输入时，不应该在新行显示光标并且应该立即发布评论（不显示新行）另请注意，新行仅显示在屏幕上，而不是存储在数据库中。以下是<p>的代码：

<p contenteditable="true" class=" addComment" id="comment_box_some_unique_id">
</p>

Answer 1

只需按 enter 即可阻止默认行为。

由于您使用的是jQuery，请使用return false，它将在jQuery处理程序中评估为e.preventDefault()和e.stopPropagation()。

代码段：

＆＃13;

$(".comment").on("keydown", function(e) {
//Check if Enter Key is pressed.
  if (e.which === 13) {

  //Check if Shift Key is pressed as well and keep default behavior.
  //This will stop function execution if enter + shift is pressed.
    if (e.shiftKey === true) return true; 

    //do Ajax Post here

    console.log($(this).text().trim()); //demo purposes
 
    //IMPORTANT: Prevent default behavior.
    return false;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="comment" contenteditable="true">
  Example Text
</p>

＆＃13;

Answer 2

只需使用jQuery方法来阻止输入密钥。

=IFERROR(IF(AND(A2=A1,B2=B1),1,IF(AND(A2=A3,B2=B3),1,1+C1)),1)

如何防止新行在屏幕上显示

2 个答案: