即时通讯开发
即时通讯开发
  • 发布:2022-06-23 10:02
  • 更新:2024-10-28 11:11
  • 阅读:2402

关于editor 聚焦失焦,insert插入图片文字时候不弹出软键盘问题

分类:uni-app

最近在开发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()

这种方法完美实现

0 关注 分享

要回复文章请先登录注册

秃顶佩奇

秃顶佩奇

回复 即时通讯开发 :
好的,多谢大佬
2022-12-05 09:36
即时通讯开发

即时通讯开发 (作者)

补充一下最新的js里面的i.index 都改成i 这一块的
2022-11-26 15:39
即时通讯开发

即时通讯开发 (作者)

回复 秃顶佩奇 :
https://uniapp-hoxin.farsunset.com/#/
2022-11-22 10:16
即时通讯开发

即时通讯开发 (作者)

回复 秃顶佩奇 :
这个就做监听啊,我们自己的即时通讯已经做了@
2022-11-22 10:16
秃顶佩奇

秃顶佩奇

回复 即时通讯开发 :
大佬,请问你有用editor组件实现@“用户名”的功能么
2022-11-18 10:53
秃顶佩奇

秃顶佩奇

回复 即时通讯开发 :
之前用的第二种不行,现在用改用第一种暂时没有发现问题,就是用这个组件的页面得改成scroll-view区域滚动,不然ios端页面会抖动
2022-11-18 10:00
即时通讯开发

即时通讯开发 (作者)

回复 秃顶佩奇 :
你用的第一种还是第二种
2022-11-18 09:42
秃顶佩奇

秃顶佩奇

大佬,为什么我按你的修改没有效果,是hbuilderx版本问题么
2022-11-16 10:29