简介
Bootstrap Tags Input 是一个基于 Bootstrap 的 jQuery 插件，用于创建一个可编辑、多标签输入框。它支持自定义分隔符、标签样式和回调函数等功能，是一款方便易用的标签输入工具。
安装
你可以使用 npm 或者手动下载包来安装 bootstrap-tagsinput。
使用 npm 安装：
--- ------- -------------------
手动下载包后，在 HTML 文件中引入相关文件即可：
----- ---------------- --------------------------------------- ------- --------------------------------- ------- ----------------------------------------------
使用方法
初始化
将一个普通的文本框转化成标签输入框，只需要在文本框上调用 tagsinput() 方法即可：
-----------------------
也可以通过传递选项来进行初始化：
---------------------- --------- ------ --------------- -------- -- ------------ ---- ---- --- ---
API
Bootstrap Tags Input 提供了一些 API 方法，可以让你对标签输入框进行控制。
addTag(tag, [options])
添加一个标签到输入框中。
------------------------------ -------
removeTag(tag)
从输入框中删除指定的标签。
--------------------------------- -------
removeAll()
删除所有标签。
----------------------------------
destroy()
销毁输入框和相关事件。
--------------------------------
事件
Bootstrap Tags Input 提供了以下事件：
| 事件名 | 描述 |
|---|---|
beforeItemAdd |
在添加一个新标签之前触发。可以通过返回 false 来取消添加。 |
itemAdded |
添加一个新标签后触发。 |
beforeItemRemove |
在删除一个标签之前触发。可以通过返回 false 来取消删除。 |
itemRemoved |
删除一个标签后触发。 |
你可以使用 jQuery 的 on() 方法来绑定这些事件：
------------------------------ --------------- - -- --- ---
示例
下面是一个基本的 Bootstrap Tags Input 示例：
--------- -----
------
------
----- ----------------
---------------- ---- ----- ----------
----- ---------------- ---------------------------------------
------- ---------------------------------
------- ----------------------------------------------
-------
------
---- -------------------
------ ---------------------
------ ----------- --------- ----------- -------- --
------
--------
---------------------------- -
----------------------
--------- ------ ---------------
-------- --
------------ ---- ----
---------- ----
---
---
---------
-------
-------在这个示例中，我们创建了一个名为 tags 的输入框，并将它转换成标签输入框。我们还传递了一些选项来自定义标签的样式和输入框的行为。
结论
Bootstrap Tags Input 是一个非常方便易用的标签输入工具，可以帮助你快速创建多标签输入框。通过本文的介绍和示例，相信你已经掌握了如何使用它。如果你有任何问题或建议，请留言让我知道。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/34097