Question

如何在可疑的div中模拟按键以编程方式？

我想用jQuery脚本以编程方式删除字符而不需要任何人为输入。

我想删除span标记末尾的一些字符，并在contenteditable div中模拟Backspace按键。

<div class="editor" contenteditable="true">
    <span>This is a span!!</span>
</div>

所以结果会是这样的：

This is a span

我不想重写文字。我需要模拟backspace按键。使用此代码进行测试，但没有任何反应。

$(document).ready(function(){ // after the website loaded
    // I want to trigger a keypress (backspace key) 
    // inside of the contenteditable div Programatically
    $('.editor').trigger(jQuery.Event('keypress', { keycode: 8 }));
});

你能帮助我吗？

Answer 1

我使用了评论中提到的部分代码：SO answer - Yuri

以下是触发keydown事件的部分

$(document).ready(function(){ // after the website loaded

    // I want to trigger a keypress (backspace key)
    // inside of the contenteditable div Programatically
    var e = jQuery.Event("keydown");
    e.which = 8; // backspace key
    $(".editor").trigger(e);
});

之后，我为 .editor 元素

创建了一个处理程序

$(".editor").keydown(function(e) {
   if (e.originalEvent === undefined) {
      console.log('triggered programmatically');
   } else {
      console.log('triggered by the user');
   }

   console.log("Key pressed:" + e.which);

   if(e.which == 8) {
       // do your stuff
   }
});

我也设置验证器来检查事件是由用户还是以编程方式触发。

使用jQuery在contenteditable元素上模拟按键

1 个答案: