快速插入预定义值到文本区域 - jQuery listTextArea插件

栏目分类：表单按钮    发布日期：2023-04-27    浏览次数：1215次     收藏

listTextArea jQuery插件可以将逗号分隔的值列表转换为一组交互式按钮。用户可以通过单击这些按钮将相应的值插入到指定的文本区域元素中。要从文本区域中删除数据，只需单击插入的值即可。

非常适合快速将预定义标签、标记、电子邮件地址等插入到文本区域中，使数据输入和管理对于您的用户来说变得轻而易举。

如何使用:

1. 在页面上包含jQuery库和listTextArea插件的文件。

<link rel="stylesheet" href="/path/to/listTextArea-jquery-plugin.css" />
<script src="/path/to/cdn/jquery.slim.min.js"/></script>
<script src="/path/to/listTextArea-jquery-plugin.js"/></script>

2. 定义逗号分隔的值列表如下:

<div class="list-container" data-list="jQueryScript.Net, CSSScript.Com, [email protected]">
	...
</div>

<textarea type="text" class="list-string">
  ...
</textarea>

$('.list-container').listBuilder({
  // options here
});

4. 覆盖默认的CSS选择器。

$('.list-container').listBuilder({

  // 按钮列表容器
  containerClass: 'list-container',

  // list item
  itemClass: 'array-item',

  // textarea
  listClass: 'list-string',
  
});