返回焦点，contenteditable 错过按键事件

Question

故事

在自定义内容编辑器组件 (contenteditable div) 中，我需要在其中阻止某些字符输入。如果用户尝试输入受限字符，则会显示一个 bootstrap 模式对话框来解释该限制（“不允许您使用 'x'）并且该事件将被阻止 (preventDefault)。关闭对话框后，焦点返回到 contenteditable 并且可以恢复输入。

Issue/Bug?

关闭对话框后，焦点确实返回到 contenteditable。但是，第一个按键事件不会绕过按键事件侦听器在 contenteditable 上触发 keypress。

我尝试手动设置焦点并在 contenteditable 上明确设置文档选择，但没有成功。我已经尝试过 jquery 和纯 js.

知道为什么第一个事件会绕过按键侦听器吗？

插图

JSFiddle here，限制“.”的示例输入：

<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');
});

在 contenteditable 中单击
按“。”字符（没有输入出现，"keypress" 消息打印到控制台）。
关闭对话框
按“。”字符再次出现（输入出现，控制台日志中没有出现按键消息）。

Answer 1

原来问题出在元素的焦点后移。添加

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

隐藏模式后修复它。

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

返回焦点，contenteditable 错过按键事件

Returning focus, contenteditable misses keypress event

javascript

modal-dialog

keypress

contenteditable

twitter-bootstrap-3

故事

Issue/Bug?

插图