我司准备做一款社交类APP产品,其中包含聊天和发帖能力,我们期望可以实现与正常web应用一样,实现可以在输入框内@其它人并且高亮的能力;如下图(下图是普通H5页面,div + contenteditable 实现)
我尝试过如下方案:
- textarea
- editor
- webview+html
- view
发现都无法满足需求,具体原因如下:
textarea 本身就不满足需求
文档:https://uniapp.dcloud.net.cn/component/textarea.html
editor 无法满足需求
比如正文内容是:我爱你,@亲爱的妈妈,这个@亲爱的妈妈 场景式 @人
1、我没有发现可以监听editor的点击事件,实际需求可能有点击这个艾特可以跳转到亲爱啊的妈妈的用户主页;
2、我无法通过给子节点(如:a元素)设置 contenteditable="false"
来实现快捷删除 艾特
或者 话题
的能力
webview + 内嵌html 无法实现
webview 的层级过高,且在安卓APP端调试阶段,webview层级过高,且设置 webview-styles
无效(试过对象和字符串形式,都无效),导致2个问题;
1、webview铺满全屏
2、层级过高页面本身的弹层无法覆盖上去
使用 view + contenteditable 属性
最后,我想到,因为我们的产品只考虑APP,所以我想尝试使用官方文档没有提及的 view+contenteditable 方式去实现一个效果,虽然看上去可以用,但是实际上我发现,这一套机制玩不转,因为在APP端,我暂时没有找到类似于web端的 document
的能力,我无法去监听这个 contenteditable 下的事件,如果是我才疏学浅,还请官方指导!
补充:2024年5月9日17:21:57
经过查阅资料,我发现 contenteditable
可以通过 input
触发事件,我想到可以直接用 @input
去进一步处理,但是我发现,在APP端,uniapp 的 input 参数是被包装过的对象,我无法获取正确的 value 值,也就是说我无法比对输入前和输入后的内容,完全没思路了