问题描述
我正在编写(免费软件,alpha阶段,相关到域专用语言来自定义GCC)。它使用作为专门的Web服务器,我希望它成为一种语法指导我正在设计一些DSL的编辑器。如果有问题,我正在谈论提交。你可以运行它为 ./ monimelt -Dweb,运行-W localhost.localdomain:8086 然后打开在您的浏览器中。
通过文件 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元素能够响应定义和限制的按键(字母数字和空格),并且不能被用户修改,否则(例如没有标点符号,没有剪切,没有粘贴,没有,没有,等等......)。
是否有一个完整的事件列表(或用户行为): contenteditable ='true'元素可以获得并且正在做出反应?
如何禁用大部分这些事件或用户操作(在键盘和鼠标上)并仅对 某些 (明确定义)键盘事件
显然,< span> / code>元素在非 contenteditable 元素中无法获得任何键盘用户操作(因为它无法获得焦点)......
我只针对最近的HTML5浏览器,例如Firefox 38或42或Chrome 47等...在Debian / Linux / x86-64上如果重要(所以我真的不关心IE9)
PS。 博客页面。让我几乎哭了...还阅读了)。另请参阅W3C关于和草稿。 W3C的两件事都在进行中。 上的W3C TR仍然是(2015年11月)的工作草案。另请参阅(在Chrome 46和Firefox 42中的行为不同或43测试版)
PS3:也许一个 contenteditable 毕竟是一个坏主意。我(可惜)考虑使用画布(àla )并进行所有编辑&通过手工绘制的JavaScript来绘制... ...
$ b $ h3 addenda:
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元素上的键盘事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!