[non] contenteditable HTML5元素上的键盘事件

Question

我正在编写MELT监视器(自由软件,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元素可以通过许多用户操作进行编辑(我甚至不了解这些用户操作的整个列表是什么......)我只希望这些span元素能够响应已定义和受限制的密钥集按(字母数字和空格)并且不能用户更改(例如没有标点符号,没有"剪切",没有"粘贴",不backspace,不tab等等).

是否有一个完整的事件列表(或用户操作)contenteditable='true'元素可以获得并正在做出反应？

如何禁用大多数这些事件或用户操作(键盘和鼠标)和反应只给一些(明确的)键盘事件？

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

我的目标只是最近的HTML5浏览器,如Firefox 38或42,或者Chrome 47等......如果重要的话,那就是Debian/Linux/x86-64(所以我真的不关心IE9)

PS.这是一个相关的问题,但不是同一个问题.

PS2:发现为什么contenteditable是可怕的博客页面.让我几乎哭了...还阅读了关于伪造浏览器Javascript中的可编辑控件(对于CodeMirror).另请参阅W3C关于编辑解释器和编辑事件草稿的内部文档草案.W3C的两件事都在进行中.UI事件上的W3C TR 仍然是(nov.2015)工作草案.另请参阅http://jsfiddle.net/8j6jea6p/(在Chrome 46和Firefox 42或43 beta中的行为有所不同)

PS3:也许这contenteditable毕竟是一个坏主意.我(遗憾地)考虑使用canvas(àlacarota)并通过手写javascript进行所有编辑和绘图......

---

附加物:

_{(2015年11月26 ^日)}

通过私下与一些Mozilla人讨论,我理解:

• contenteditable是凌乱的(所以我宁愿避免它),并且在Firefox中不再有用(例如,即使是最近的测试版Firefox也不知道contenteditable='events',请参阅nsGenericHTMLElement.h文件)

• 事件冒泡和捕获很重要

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

• 文本选择 API可能很有用(但最近有一些错误)

所以我可能不需要 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);