如何使用 js 和 css 实现 segmentfault 的标签输入效果?

图片描述

如图,想做一个类似于这样的标签输入 widget。以下的一些特性不知道怎么实现比较好,求有经验者指教。

  1. 输入逗号或者分号后自动转成如上的标签效果。

  2. 在标签后按消除键删除标签。

  3. 限制最多输入 X 个标签。

还有一些高级的功能:

  1. 输入标签的同时自动提示补全。

  2. 自带提示。

可能描述的不是很清晰,具体特性可以打开一个问题发布页面实际体验。

阅读 3.8k
4 个回答

一会吃完饭再来完善,刚撸了点demo地址

吃了午饭闲着也撸了一个——

demo

一贯的说思路,不贴代码。

先回答前面的1,2,3:
1,既然是输入,当然是用事件监听的方式,然后调用对应的判断函数;
2,原理基本同1;
3,还是同1

大致逻辑为:EventListener -> Function -> Operate DOM

其次是高级功能:
1,自动补全嘛有很多实现原理,可以异步的从服务器去取,也可以是首次渲染的时候缓存的本地。然后再查询出来。
2,原理同上

新手上路,请多包涵

Input框监听键盘事件,输入变化时获取建议项(也可以不这样,换作回车添加项),然后input需要在外面加一个wrapper,灰框实现是应用在wrapper上的,input框宽度是变化的(宽度需要动态计算),input的宽度是已输入的标签,到行尾之间的宽度。你得意识到,当换行时,这需要做好处理。键盘事件也得处理delete,backspace,left,right,因为你可能需要通过键盘进行选择、删除。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题