如图,想做一个类似于这样的标签输入 widget。以下的一些特性不知道怎么实现比较好,求有经验者指教。
输入逗号或者分号后自动转成如上的标签效果。
在标签后按消除键删除标签。
限制最多输入 X 个标签。
还有一些高级的功能:
输入标签的同时自动提示补全。
自带提示。
可能描述的不是很清晰,具体特性可以打开一个问题发布页面实际体验。
如图,想做一个类似于这样的标签输入 widget。以下的一些特性不知道怎么实现比较好,求有经验者指教。
输入逗号或者分号后自动转成如上的标签效果。
在标签后按消除键删除标签。
限制最多输入 X 个标签。
还有一些高级的功能:
输入标签的同时自动提示补全。
自带提示。
可能描述的不是很清晰,具体特性可以打开一个问题发布页面实际体验。
一贯的说思路,不贴代码。
先回答前面的1,2,3:
1,既然是输入,当然是用事件监听的方式,然后调用对应的判断函数;
2,原理基本同1;
3,还是同1
大致逻辑为:EventListener -> Function -> Operate DOM
其次是高级功能:
1,自动补全嘛有很多实现原理,可以异步的从服务器去取,也可以是首次渲染的时候缓存的本地。然后再查询出来。
2,原理同上
Input框监听键盘事件,输入变化时获取建议项(也可以不这样,换作回车添加项),然后input需要在外面加一个wrapper,灰框实现是应用在wrapper上的,input框宽度是变化的(宽度需要动态计算),input的宽度是已输入的标签,到行尾之间的宽度。你得意识到,当换行时,这需要做好处理。键盘事件也得处理delete,backspace,left,right,因为你可能需要通过键盘进行选择、删除。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
一会吃完饭再来完善,刚撸了点demo地址