search

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