zoukankan      html  css  js  c++  java
  • 判定是否为表单元素

    发现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>
    

  • 相关阅读:
    sql server 2008 安装过程与创建建sql server登录用户
    Angularjs之controller 和filter(四)
    Angularjs之表单实例(三)
    antlr应用
    antlr4笔记(转)
    go升级版本
    go安装依赖包
    tsar
    java纤程
    HighLevelRestApi管理ES
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1665441.html
Copyright © 2011-2022 走看看