标签输入框是个这样的东西：点我体验。
只要你输入一些字符，敲击回车就会生成一个”标签”，是一种常见的效果。
实现这样一个东西远没有它看起来麻烦，实际上它的HTML就是这样一个样子：
|
1 2 3 4 5 6 7 |
<div class="tag-input-container"> <div class="tag-box">游戏</div> <div class="tag-box">美女</div> <div class="tag-box">足球</div> <div class="tag-box">啤酒</div> <input type="text" class="tag-input"> </div> |
外围实际是一个DIV模拟的输入框（有边框看起来就像是输入框），内部左侧是若干浮动的标签，右侧是一个很短的输入框，从而令.tag-input-container看起来像是一个大输入框。
接下来可以完善各种操作，我只实现了最基础的回车添加标签，监听一下.tag-input的键盘事件即可：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function () { $(".tag-input").bind("keyup", function (event) { if (event.keyCode == 13) { var tag = $(this).val() if (tag) { var tagBox = $('<div class="tag-box"></div>') tagBox.text(tag) $(this).val("") $(this).before(tagBox) } } }) }) </script> |
项目代码在这里查看：https://github.com/owenliang/tag-input。
如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~
