javascript - trick IE form and its expando attribute

最新推荐文章于 2022-10-11 16:01:48 发布

原创最新推荐文章于 2022-10-11 16:01:48 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个在IE浏览器中遇到的问题，即某些输入元素被误认为是表单对象的属性。通过使用getAttributeNode方法，可以正确地获取表单元素的实际属性。文章还提供了测试代码和示例来验证解决方案。

there is a known issue that if you have a form with several inupt elements, and those elemnt happens to have specific id or names then the elements becomes the expando attribute of the form element.

e.g..

<body>
<form id="form" action="/">
<input type="text" id="id"/>
<input type="text" name="action"/>
</form>
</body>

in this example, if you do

form.id, then it return the DOM element, and if you do form.action, it returns another input element.

so to work around, this, there is a method which is called getAttributeNode. please see the following code which first check the attribute node then check to see if there there is attribute with that name (the expando is equivalent of getAttribute)

/**************************************
*@Name: ieformexpando.js
*@Summary
*  due to some reason, the IE will treat some input element as attribute to the form object  if the nput elements happens to have a specific name or ID
*
*
* <form id="form" action="/">
*  <input type="text" id="id"/>
* <input type="text" name="action"/>
* </form>
***************************************/

function attr(elem, name) {
  if (elem.nodeName.toUpperCase() === "form" && elem.getAttributeNode(name)) {
    return elem.getAttributeNode(name).nodeValue;
  }
  else {
    return elem.getAttribute(name);
  }
}

and below is the code that test the code above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- ieformexpando.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../unit.js"></script>
    <script type="text/javascript" src="ieformexpando.js"></script>
    <script type="text/javascript">
      window.onload = function () {
        test("test IE expando ", function () {
          var form = document.getElementById("form");
          // both are 'form' and '/' accordingly
//          alert(attr(form, "id"));
//          alert(attr(form, "action"));
          assert(attr(form, "id") === 'form', "attr return the attribute node rather that the attribute where is faked by the element");
          assert(attr(form, "action") === '/', "attr return the attribute node rather that the attribute where is faked by the element");
        });
      };
    </script>
    <style type="text/css">
      #results li.pass { color:Green }
      #results li.fail { color:red}
    </style>
</head>
<body>
<ul id="results" />
<form id="form" action="/">
<input type="text" id="id"/>
<input type="text" name="action"/>
</form>
</body>
</html>