在前端开发中，我们常常需要对输入框进行 Tag 处理，以便将多个关键词作为一组数据进行处理。而 jquery-tagsinput 是一个简单易用的 jQuery 插件，可以帮助我们实现这一需求。本文将介绍 jquery-tagsinput 的使用方法，并提供示例代码以供参考。
安装和使用
首先，我们需要安装 jquery 和 jquery-tagsinput 两个 npm 包。可以通过以下命令进行安装：
npm install jquery jquery-tagsinput
接着，在 HTML 中引入相应的脚本文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
----- ---------------- ------------------------------------
-------
------
------ ----------- ----------------
------- -------------------------------------
------- -------------------------------------------
--------
---------------------------- -
-----------------------------
---
---------
-------
-------在上面的示例中，我们首先引入了 jquery.tagsinput.css 样式表，然后在 body 中添加了一个输入框，并在脚本中对其进行了初始化。
参数配置
jquery-tagsinput 支持多种参数配置，例如 tagClass、height、width 等。下面是一些常用的参数及其用法：
- tagClass：指定标签的 CSS 类名；
- height：指定输入框的高度；
- width：指定输入框的宽度；
- defaultText：指定输入框中默认的提示文本。
以下是一个示例，展示如何使用这些参数：
$('#tags-input').tagsInput({
tagClass: 'badge badge-primary',
height: '50px',
width: '100%',
defaultText: '请输入关键词'
});事件处理
jquery-tagsinput 还支持多种事件处理函数，例如 onAddTag、onRemoveTag 等。通过这些事件处理函数，我们可以在用户添加或删除标签时执行一些自定义操作。以下是一个示例：
$('#tags-input').on('onAddTag', function(tag) {
console.log('tag added: ' + tag);
});
$('#tags-input').on('onRemoveTag', function(tag) {
console.log('tag removed: ' + tag);
});总结
本文介绍了 jquery-tagsinput 的安装和使用方法，并提供了参数配置和事件处理的示例。通过本文的学习，读者可以更好地掌握 jquery-tagsinput 的使用技巧，更加高效地开发前端应用。
完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
----- ---------------- ---------------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
-------------------- -------
------ ----------- ----------------
------- ----------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
--------
---------------------------- -
----------------------------
--------- ------ ---------------
------- -------
------ -------
------------ ---------
--------- ------------- -
---------------- ------ - - -----
--
------------ ------------- -
---------------- -------- - - -----
-
---
---
---------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34276