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>
    

  • 相关阅读:
    Linux下JDK的安装
    Docker 搭建 Maven 私服
    K8s 部署 PostgreSQL
    CentOS7 使用 kubeadm 部署 K8s(单机/集群)
    CentOS7 升级 Vim
    Go 函数详解
    CentOS7 安装 golang
    Redis 集群伸缩原理
    CentOS7 安装 Redis
    CentOS7 搭建 Redis 集群
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1665441.html
Copyright © 2011-2022 走看看