javascript - [非] contenteditable HTML5 元素上的键盘事件

Question

我正在编写 MELT monitor (免费软件，alpha 阶段，与 GCC MELT 域特定语言相关以自定义 GCC)。它正在使用 libonion充当专门的 Web 服务器，我希望它成为我正在设计的某些 DSL 的语法导向编辑器。我说的是提交 97d60053如果这很重要。您可以将其运行为 ./monimelt -Dweb,run -W localhost.localdomain:8086然后打开http://localhost.localdomain:8086/microedit.html在您的浏览器中。

我正在发射(通过文件 webroot/microedit.html )

<h1>Micro Editing Monimelt</h1>
<div id='microedit_id' contenteditable='true'>*</div>
<hr/>

然后一些 AJAX 技巧填充了 #micredit_id包含类似于以下内容的元素:

    <dd class='statval_cl' data-forattr='notice'> &#9653;
    <span class='momnode_cl'>*<span class='momconn_cl'>
    <span class='momitemref_cl'>comment</span></span>
    (&#8220;<span class='momstring_cl'>some simple notice</span>&#8221;
     <span class='momnode_cl'>*<span class='momconn_cl'>
     <span class='momitemref_cl'>web_state</span></span>
     (<span class='momnumber_cl'>2</span>)</span>
     <span class='momitemval_cl'>hashset</span>
     <span class='momset_cl'>{<span class='momitemref_cl'>microedit</span>
     <span class='momitemref_cl'>the_agenda</span>}</span>
     <span class='momtuple_cl'>[<span class='momitemref_cl'>web_session</span>
     <span class='momitemref_cl empty_cl'>~</span>
     <span class='momitemref_cl'>the_system</span>]</span>)</span> ;</dd> 

现在，我想要每个 <span>类momitemref_cl对某些 键盘(可能还有鼠标)事件敏感。然而，contenteditable元素可以通过许多用户操作进行编辑(我什至不明白此类用户操作的完整列表是什么......)并且我只希望这些跨度元素响应一组定义和限制的键按(字母数字和空格)并且不能以其他方式进行用户更改(例如，没有标点符号，没有“剪切”，没有“粘贴”，没有退格键，没有 tab 等...)。

是否有完整的事件(或用户操作)列表 contenteditable='true'元素可以获取并正在响应？

如何禁用大部分这些事件或用户操作(在键盘和鼠标上)并仅对一些使用react(明确定义)键盘事件？

显然，一个 <span>非 contenteditable 中的元素元素无法获得任何键盘用户操作(因为它无法获得焦点)...

我的目标是仅最近的 HTML5 浏览器，例如 Firefox 38 或 42，或 Chrome 47 等...在 Debian/Linux/x86-64 上，如果这很重要(所以我真的不关心 IE9)

附言。 this是一个相关的问题，但不是同一个问题。

PS2:找到why contenteditable is terrible博客页面。让我差点哭了……另请阅读faking an editable control in browser Javascript (对于 CodeMirror)。另请参阅关于 Editing Explainer 的 W3C 内部文件草案和 edit events草稿。 W3C 的两件事都在进行中。 W3C TR 上 UI events仍然是(2015 年 11 月)工作草案。另见 http://jsfiddle.net/8j6jea6p/ (在 Chrome 46 和 Firefox 42 或 43 beta 中表现不同)

PS3:可能是 contenteditable毕竟是个坏主意。我(悲伤地)考虑使用 canvas (à la carota )并通过手写的 javascript 进行所有编辑和绘图...

---

附录:

_{(2015 年 11 月 26 日)}

通过与一些 Mozilla 人员私下讨论，我了解到:

• contenteditable 很乱(所以我宁愿避免它)，并且在 Firefox 中不再有效(例如，即使是最近的 beta Firefox 也不知道 contenteditable='events'，请参阅 nsGenericHTMLElement.h file)

• event bubbling and capturing很重要

• 正常 <div> (或 <span> )可以通过给它一个 tabindex 来使其可聚焦属性(property)

• text selection API 可能会有用(但有一些最近的 bugs )

所以我可能不需要contenteditable

Answer 1

你可以这样做:

function validateInput(usrAct){
  swich(usrAct){
    case "paste":
    // do something when pasted
    break;
    case "keydown":
    // dosomething on keydown
    break;
    default:
    //do something on default
    break;
  }
}

document.querySelectorAll('.momitemref_cl').addEventListener('input', function(e){
  validateInput(e.type)
}, false);