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

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

展示

背景

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

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

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

光标是什么？

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

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

在微信小程序中实现Wi-Fi功能
在微信小程序中实现Wi-Fi连接功能 #1.首先通过后端提供的接口获取到ssid和password const { data: wifi } = useQuery(["wifi"] ...
微信小程序中百分百实现聊天界面
众所周知,全网来看,微信的聊天界面看着就是舒服,那能否在微信小程序中实现该功能,同时可以实现输入文本和语音功能,而且在输入文本时,键盘可以弹起.话不多说,上界面看看. wxml实现如下: < ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...

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

展示

背景

光标是什么？

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

最新文章

热门文章