本文主要向大家介绍关于js输入关键词标注效果的相关内容，并分享给大家参考。下面我们来看看详细的介绍：

实现功能：

输入关键字和空格键以添加标记标签。按退格键删除标签。输入关键词后，鼠标失去焦点。添加标签标签关键字初始化方法初始化方法显示效果：

演示演示文稿地址

示例代码

风格。block { display:flexflex-direction : row；align-items : center；宽度width:500px高度：30 px；border:1px实心# dddpadding:10pxmargin:100px自动0；} # wordTags { display:flexflex-wrap : nowrap；}输入{ width :100%；高度：20 px；border:none}/style Div class=' block ' Div id=' WordTags '/Div input id=' WordInput ' type=' text ' name=' placeholder='请输入以空格结尾的关键字' input id=' Wordhiddeninput ' type=' hidden ' name=' '/Div script src=' http :https://cdn . bootcss.com/jquery/1 . 12 . 4/jquery . js '/script script type=' text/JavaScript ' src=' http 3366keyWord({ panel: '#wordTags '，Value:' # wordhiddeninput '，max: 3，tips: '最多只能输入3个项目' })；KeyWord.init('php，java，前端开发')})；属性描述：

Panel: panel id值：隐藏字段id max:最大输入关键字编号tips:提示摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。