最近在开发uniapp 即时通讯遇到一个问题
由于要发送表情 想在输入框显示表情,所以input和textarea都不可行,就选择用了editor
但是在用insertImage 插入表情的时候,editor就聚焦弹出软键盘了,就出现表情列表和软键盘同时出现的问题
这样体验不好,也不美观
经过多方查找 找到两个方法
1、通过renderjs方法给editor加inputmode 属性 这个属性可以自行查询
if(!val) {
this.$el.querySelector('.ql-editor').setAttribute('inputmode', 'none')
} else {
console.log(this.$el)
if(this.$el.querySelector('.ql-editor')) this.$el.querySelector('.ql-editor').removeAttribute('inputmode')
}
通过选择表情还是输入文字来增加移出inputmode 属性 (ql-editor这个是editor组件内部的一个div)
但是这种方法有一个bug 如果是长页面 ,插入表情 软键盘确实可以不弹出了但是 页面会抖动,
2、就是修改hubuider关于editor的源码
https://ask.dcloud.net.cn/question/103551
参考这篇文章
D:\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-app-plus\dist
修改view.umd.min.js 这个js
insertImage
i = h.getLength()-1;
h.insertEmbed(i, "image", P, f.sources.USER);
var M = !!/^(file|blob):/.test(P) && P;
u = !0, h.formatText(i, 1, "data-local", M), h.formatText(i, 1, "alt",
x), h.formatText(i, 1, "width", C), h.formatText(i, 1, "height", O),
h.formatText(i, 1, "class", E), u = !1, h.formatText(i, 1,
"data-custom", Object.keys(A).map((function(t) {
return "".concat(t, "=").concat(A[t])
// })).join("&"));
})).join("&")), h.setSelection(null, f.sources.SILENT);
h.blur()
这种方法完美实现
18 个评论
要回复文章请先登录或注册
jyjyjy28
c***@163.com
耳東陳
秃顶佩奇
耳東陳
2***@qq.com
3***@qq.com
3***@qq.com
t***@163.com
1***@qq.com