capricorncd / zx-editor

The HTML document (rich text) editor in Smart phone browser or webview, supporting mixed layout, reference, headline, unordered list, font color, bold and italics. 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体
https://capricorncd.github.io/zx-editor/demo
331 stars 100 forks source link

<p class="child-node-is-img" contenteditable="false">无效 #9

Open chenyucai opened 6 years ago

chenyucai commented 6 years ago

image 点击图片,还是弹出键盘了。有一个体验比较不好的地方,就是点击删除图片的叉叉时,弹出键盘了。是不是可以在点击删除事件那里stop和prevent一下,看样子时点击穿透了。

yaofang123 commented 5 years ago

也遇到同样的问题,但是下载代码本地运行,微信浏览器,qq浏览器、google浏览器都没有这个问题。自己的代码在微信浏览器、google浏览器都会唤起键盘,只有在qq浏览器不会唤起,不知道是啥原因

yaofang123 commented 5 years ago

之前也以为是冒泡事件的锅,看来源代码,其实是有阻止事件冒泡的。发现是contenteditable的锅。看了源码,在点击图片或是删除按钮的时候是传出了一个click事件的,可以在此时使元素失去焦点(blur)。我的代码如下,测试是可用的。(我的事件里又判断判断了一次,应该也可以不用判断) zxEditor.on('click', function(dom, e) { if (e.target.nodeName.toLowerCase() === 'i' || e.target.nodeName.toLowerCase() === 'img') { document.querySelector('.zxeditor-content-wrapper').blur(); } });