添加 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 为还原

修改了一个图片查看器(管理器)

说明如下:

这个程序原本是Wordpress插件IImage Browser,修改了部分代码,翻译了界面和注释,修改一下文件头部的设置后理论上可以整合在任何系统中(每个设置都有注释)

功能:上传图片,建立目录,目录直读,可以自动生成图片的HTML或者BBCODE代码(自行定义),生成缩略图(需要GD支持),删除图片或者缩略图,如果设置正确可以把生成的代码直接插入内容表单中

附带“代码直接插入内容表单”的范例,超简单,将所有的文件解压到空间后访问demo.htm就可以了

程序其实只有一个文件image_browser.php,目录和demo.htm仅仅是为了范例可以直接使用,具体可以参考image_browser.php头部的注释修改设置

特别提醒:
* 基于安全的考虑,这个文件不要用在前台,请自行增加用户验证功能
* 建议多分目录,不要在一个目录放太多的文件

下载在http://bbs.phpso.com/showthread.php?t=1324:icon_em03: