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

我正在编写 MELT monitor(免费软件,alpha阶段,与 GCC MELT域专用语言相关以自定义GCC).它正在使用 libonion作为一个专门的Web服务器,我希望它成为我正在设计的一些DSL的语法指导编辑器.我正在谈论commit 97d60053如果重要.您可以运行它./monimelt -Dweb,运行-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对一些键盘(也可能是鼠标)事件敏感.然而,可以通过许多用户操作编辑可内容元素(我甚至不知道这样的用户操作的整个列表是什么….),我只希望这些span元素响应于定义和限制的按键(字母数字和空格),否则不能被用户更改(例如,没有标点符号,没有“剪切”,没有“粘贴”,没有退格键,没有标签等).

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

如何禁用大多数这些事件或用户操作(键盘和鼠标),并仅响应一些(定义良好的)键盘事件？

显然,< span>元素在不可内容元素中无法获得任何键盘用户操作(因为它不能得到焦点)…

我只针对最近的HTML5浏览器,如Firefox 38或42,或Chrome 47等…在Debian / Linux / x86-64上,如果这很重要(所以我真的不在乎IE9)

PS. this是一个相关的问题,但不一样.

PS2：找到why contenteditable is terrible 博客页面.让我几乎哭了…还读了约faking an editable control in browser Javascript(CodeMirror).另见W3C内部文件草案Editing Explainer和edit events草案. W3C的事情都在进行中. UI events的W3C TR仍然是(2005年12月)的一份工作草案.另请参见http://jsfiddle.net/8j6jea6p/(在Chrome 46和Firefox 42或43 beta版中的行为有所不同)

PS3：可能是一个可饶恕的毕竟是一个坏主意.我(可悲的是)考虑使用画布(àla carota),并做所有的编辑&用手写的JavaScript绘图…

附加物：

(2015年11月26日)

通过与Mozilla的一些人私下讨论,我明白：

> contenteditable是凌乱的(所以我宁愿避免这一点),而且在Firefox中不再有太多的工作(例如即使是最近的beta版Firefox也不了解contenteditable =’events’,请参阅nsGenericHTMLElement.h file)
> event bubbling and capturing很重要
>正常< div> (或< span>)可以通过给它一个tabindex属性来进行聚焦
> text selection API可能很有用(但最近有一些bugs)

所以我可能不需要contenteditable

解决方法

你可以这样做：

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

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

解决方法

猜你在找的JavaScript相关文章