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

关于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 关注 分享

要回复文章请先登录注册

jyjyjy28

jyjyjy28

改源码,这也是好方法嘛?
2024-10-28 11:11
c***@163.com

c***@163.com

你好,请问如果是插入文字的话,插入成功后怎么让它不自动弹出软键盘啊
2024-08-28 09:20
耳東陳

耳東陳

回复 秃顶佩奇 :
是的
2023-04-23 10:11
秃顶佩奇

秃顶佩奇

回复 耳東陳 :
是有在APP端用editor组件实现@用户的功能么
2023-04-06 18:03
耳東陳

耳東陳

回复 秃顶佩奇 :
我有
2023-04-06 11:13
2***@qq.com

2***@qq.com

你好 我这边替换了还是没生效呢
2023-02-09 13:56
3***@qq.com

3***@qq.com

回复 3***@qq.com :
插入图片可以,插入文字不行。
2023-02-07 10:58
3***@qq.com

3***@qq.com

回复 t***@163.com :
这个好像不行吧? that.biaoq2 = true 设置成已读就没法插入了呀。
2023-02-07 10:11
t***@163.com

t***@163.com

设置和取消已读,就可以保证不聚集
let that = this
that.biaoq2 = true; //<editor :read-only="biaoq2" //设置只读
setTimeout(() => {
that.editorCtx.insertImage({
src: img,
width: '30px',
height: '30px',
nowrap:true,
focus:false,
success: function (res) {
that.biaoq2 = false;
}
})
}, 1)
2022-12-29 17:48
1***@qq.com

1***@qq.com

请问您一下 表情插入之后 和输入的文字不会居中要怎么办
2022-12-06 17:47