[non] contenteditable HTML5元素上的键盘事件 [英] keyboard events on [non-] contenteditable HTML5 elements

问题描述

我正在编写 MELT监视器（免费软件，alpha阶段，相关到 GCC MELT 域专用语言来自定义GCC）。它使用 libonion 作为专门的Web服务器，我希望它成为一种语法指导我正在设计一些DSL的编辑器。如果有问题，我正在谈论提交 97d60053 。你可以运行它为 ./ monimelt -Dweb，运行-W localhost.localdomain：8086 然后打开 http：//localhost.localdomain：8086 / microedit.html 在您的浏览器中。

通过文件 webroot / microedit.html ）

 < h1> Micro编辑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'>评论< / span>< / span> 
（& amp;＃8220;< span class ='momstring_cl'>一些简单的通知< / 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'> ;微编辑< / 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> ]< /跨度>）< /跨度> ;< / DD> 
  

现在，我希望每个< span> $ em $ c> momitemref_cl 对某些键盘（可能还有鼠标）事件敏感。然而， contenteditable 元素可以通过许多用户操作进行编辑（我甚至不知道这些用户操作的完整列表是什么....），我只希望这些span元素能够响应定义和限制的按键（字母数字和空格），并且不能被用户修改，否则（例如没有标点符号，没有剪切，没有粘贴，没有 backspace ，没有 tab ，等等......）。

是否有一个完整的事件列表（或用户行为）： contenteditable ='true'元素可以获得并且正在做出反应？

如何禁用大部分这些事件或用户操作（在键盘和鼠标上）并仅对 某些 （明确定义）键盘事件

显然，< span> / code>元素在非 contenteditable 元素中无法获得任何键盘用户操作（因为它无法获得焦点）......

我只针对最近的HTML5浏览器，例如Firefox 38或42或Chrome 47等...在Debian / Linux / x86-64上如果重要（所以我真的不关心IE9）

PS。 这是一个相关的问题，但不是一个相同的问题。

PS2：找到为什么 contenteditable 很糟糕博客页面。让我几乎哭了...还阅读了在浏览器Javascript中伪造可编辑控件（对于 CodeMirror ）。另请参阅W3C关于编辑说明和编辑活动草稿。 W3C的两件事都在进行中。 UI事件上的W3C TR仍然是（2015年11月）的工作草案。另请参阅 http://jsfiddle.net/8j6jea6p/ （在Chrome 46和Firefox 42中的行为不同或43测试版）

PS3：也许一个 contenteditable 毕竟是一个坏主意。我（可惜）考虑使用画布（àla carota ）并进行所有编辑&通过手工绘制的JavaScript来绘制... ...


$ b $ h3 addenda：

<通过与一些Mozilla人私下讨论，我了解到： _{（11月26日 ^th 2015）} / p>

• contenteditable 是凌乱的（所以我宁愿避免它），并且不再在Firefox中工作太多（例如，即使是最近的测试版Firefox也不知道 contenteditable ='events'，请参阅 nsGenericHTMLElement.h file ）




• 事件冒泡和捕获事关重大




• 正常< div> （或< span > ）可以通过给它一个 tabindex 属性




• 文本选择 API可能是有用的（但有一些最近的错误）


ul>



所以我可能不需要 contenteditable

解决方案

您可以这样做：



 函数validateInput（usrAct）{
 swich （usrAct）{
 casepaste：
 //粘贴
 break时执行某些操作; 
 casekeydown：
 // keydown上的dosomething 
 break; 
默认值：
 //在默认
中做某事break; 
 
 
 $ b $ document.querySelectorAll（'。momitemref_cl'）。addEventListener（'input'，function（e）{
 validateInput（e.type）
}，false）; 
  




I'm coding the MELT monitor (free software, alpha stage, related to the GCC MELT domain specific language to customize GCC). It is using libonion to behave as a specialized web server, and I want it to become a syntax directed editor of some DSL I am designing. I'm speaking of commit 97d60053 if that matters. You could run it as ./monimelt -Dweb,run -W localhost.localdomain:8086 then open http://localhost.localdomain:8086/microedit.html in your browser.

I am emitting (thru file webroot/microedit.html)

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

then some AJAX trickery is filling that #micredit_id element with something containing stuff similar to:

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

Now, I want every <span> of class momitemref_cl to be sensitive to some keyboard (and perhaps mouse) events. However, the contenteditable elements can be edited by many user actions (I don't even understand what is the entire list of such user actions....) and I only want these span elements to be responsive to a defined and restricted set of key presses (alphanumerical & space) and not be able to be user-changed otherwise (e.g. no punctuation characters, no "cut", no "paste", no backspace, no tab, etc...).

Is there a complete list of events (or user actions) that a contenteditable='true' element can get and is reacting to?

How to disable most of these events or user actions (on keyboard & mouse) and react only to some (well defined) keyboard events?

Apparently, a <span> element in a non-contenteditable element cannot get any keyboard user action (because it cannot get the focus)...

I am targeting only recent HTML5 browsers, such as Firefox 38 or 42, or Chrome 47 etc... on Debian/Linux/x86-64 if that matters (so I really don't care about IE9)

PS. this is a related question, but not the same one.

PS2: Found the why contenteditable is terrible blog page. Makes me almost cry... Also read about faking an editable control in browser Javascript (for CodeMirror). See also W3C draft internal document on Editing Explainer and edit events draft. Both W3C things are work in progress. W3C TR on UI events is still (nov.2015) a working draft. See also http://jsfiddle.net/8j6jea6p/ (which behaves differently in Chrome 46 and in Firefox 42 or 43 beta)

PS3: perhaps a contenteditable is after all a bad idea. I am (sadly) considering using a canvas (à la carota) and doing all the editing & drawing by hand-written javascript...

---

addenda:

_{(November 26^th 2015)}

By discussing privately with some Mozilla persons, I understood that:

• contenteditable is messy (so I rather avoid it), and is not anymore worked much in Firefox (for instance, even recent beta Firefox don't know about contenteditable='events', see nsGenericHTMLElement.h file)

• event bubbling and capturing matters a big lot

• a normal <div> (or <span>) can be made focusable by giving it a tabindex property

• text selection API could be useful (but has some recent bugs)

So I probably don't need contenteditable

解决方案

You can do as such:

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

这篇关于[non] contenteditable HTML5元素上的键盘事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！