发现jQuery1.41的一个bug,John Resig在实现他的事件代理系统(live)时,需要对当前元素进行判定,判定其是否为表单元素。
var formElems = /textarea|input|select/i; //********** formElems.test( elem.nodeName)
但很明显,他忘记了button标签。我不知其他人怎样用它,我在设计一个站内短信系统时,把用它来区分是群发,还是丢到垃圾箱什么的。要修正这个bug很容易,就是补上button字段,但我想出另一个更严谨的判定:
var isFormElement = function(obj){ return !!(obj.tagName && "name" in obj && "form" in obj); }
首先我们判定其是否为元素节点,用的是tagName。在IE下,注释节点也有tagName,永远为"!",不过没关系,后面的条件能剔除它。然后判定其原型中是否存在name属性,a标签也有name属性,不过没关系。最后判定其原型是否存在form属性,表单元素都有一个form属性,指向其最近的祖先form标签。不过表单元素不单止input标签,select标签,textarea标签,button标签,还有label标签,fieldset标签,legend标签,HTML5还新增了output标签,datalist标签,谁晓得以后还加什么东西。但现在可以知道,label,fildset,legend是不会在提交时添加什么东西。(我们在提交时,会生成一个queryString,以name=value&name2=value2的形式提交到后台,name属性就在此时发挥作用了)。因为它们三个都没有name属性,因此我们可以把它们区别开去!
最后,我们拿以下页网验证一下:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>isFormElement by 司徒正美</title> </head> <body> <!--这是注释节点//--> <form action=""> <fieldset> <legend>表单</legend> <select name="aaa"> <option>1</option> <option>2</option> <option>3</option> </select> <label for="bbb"> <input type="text" name="bbb"> </label><br/> <textarea name="ccc">司徒正美</textarea> <div ><button type="submit" name="ddd">提交</button></div> </fieldset> </form> </body> </html>