如何在微信小程序中实现具有@功能的输入框

Posted 2023-03-10 恪愚

你可以直接从npm中下载组件使用： npm - yun-ui-micro 中的 atinput 组件。也可通过本文代码二次修改。

展示

背景

像微信群聊、微博的输入框中输入“@”符号，能够选择人员，特殊通知某个人。

这个功能涉及一个考虑点：要不要做“@人员”区域特殊样式？
答：在小程序中很难做到。因为像 input 、textarea 中是不能插入标签的，如果要做只能通过 html5 的 contenteditable 属性配合 div 标签实现，使用抢到的 Range 和 Selection API 去控制光标控制来实现类似聊天框里的 @ 功能。但是微信小程序中不支持这个属性~

小程序中只有一个相关的事件：bindinput。

光标是什么？

光标是一种特殊的“选择区域”。感官上来说，以ios为例，当我们把选择区域的起始点和结束点重合，就变成了“光标”。从实现上