回归焦点，满足于错过按键事件

Question

故事

在自定义内容编辑器组件（contenteditable div）中，我需要阻止某些字符输入。如果用户尝试输入受限字符，则会显示一个引导模式对话框，说明限制（＆＃34;您不能使用＆＃39; x＆＃39;）并且事件被阻止（preventDefault ）。在关闭对话框后，焦点将重新回到contenteditable，输入可以恢复。

问题/错误？

在驳回对话框后，焦点确实回到了满足的目标。但是，第一个关键事件不会绕过keypress事件侦听器触发keypress。

我尝试手动设置焦点并在contenteditable上明确设置文档选择，没有运气。我已经尝试过使用jquery和纯js。

任何想法为什么第一个事件绕过了按键监听器？

插图

JSFiddle here，示例限制＆＃34;。＆＃34;输入：

<div id="testMe" contenteditable="true" class="form-control"></div>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
          <p> You are not allowed to use this character.</p>
          <p> Press OK to dismiss.</p>
      </div>
      <div class="modal-footer">
        <button id="closeAlert" type="button" class="btn btn-danger">OK</button>
      </div>
    </div>
  </div>
</div>


$("#testMe").keypress(function(event) {
    console.log("key pressed");
    if (String.fromCharCode(event.which) == ".") {
        event.preventDefault();
        $('#myModal').modal('show');
    }
});


$("#closeAlert").click(function() {
    $('#myModal').modal('hide');
});

1. 点击contenteditable
2. 按＆＃34;。＆＃34;字符（不显示任何输入，并且＆＃34;按键＆＃34;消息将打印到控制台）。
3. 关闭对话框
4. 按＆＃34;。＆＃34;再次出现字符（输入显示，控制台日志中没有keypresssmessage）。

Answer 1

事实证明，问题在于回顾元素的焦点。添加

$("#testMe").focus();

隐藏模态后修复它。

我最初使用bootbox库来显示模态。由于不明原因，在对话框关闭回调后立即设置焦点不起作用。