添加 TAG 用的表单处理 JS

TextCube 里面添加 Tag 的表单处理效果很有意思,我仿照那个效果写了一个 JS 用于正在写的项目中,经过n个小时的努力终于完成了,前前后后改了 n 遍,只是兼容 Firefix、IE、Opera 就累的够呛了>_<

虽然效果和 TextCube 里面是一样的,但是代码都是偶自己写的哦(路人:难怪这么烂 …╥﹏╥)

发表出来大家看看吧,顺便帮忙测试看看有没有什么 Bug

本JS的优点:

  1. 小 ,只有7KB,TextCube 同样功能的 JS 为 18KB,压缩后会更小(注1)
  2. 可以用于同一页面的多个 input 表单,对 input 是否有 ID,name 是否相同,以及所处的位置没有任何要求
  3. 不需要对原始表单做太多的处理,仅仅需要在 class 中加上 tag_input,在提交的时候执行一下 tagInput.submitForm();(注2)
  4. 对于表单来说是透明的,保留了原始表单的 class 样式,服务器端脚本所需要做的处理和没有 JS 时一样

注1:TextCube 那个 JS 里面还包含自动完成提示,而偶这个还需要一个公用 JS 2.7KB = =b,实际上这个公用 JS 就是我在项目中用的,我项目中实际用的公用 JS 比这个要大多了…23KB左右,这个只是包含了 tag.js 中用到的函数

注2:当然不执行也没关系,不过不执行的话你还放在添加 input 里的文字会被舍弃,具体看你自己选择了

e…..应该说缺点至少有一个…暂时还不能用于多个表单 = =b ,貌似…一般一个页面也就只需要一个添加 Tag 的地方吧^^a

https://www.flyinghail.net/sample/tag/index.php

10/18 修改:

  1. 转换全角空格为半角空格
  2. 将多个空格转换成一个空格
  3. 过滤特殊字符 0173(感谢小M )、0127

10/21 修改:

  1. 支持多个 Tag 添加表单
  2. 不需要事先知道需要处理的表单 ID,仅仅需要在表单的 class 中添加 tag_input 程序会自动识别
  3. 编辑时 ESC 为还原

3 thoughts on “添加 TAG 用的表单处理 JS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据