javascript - trick IE form and its expando attribute -

joe.bq.wang

浏览: 399653 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript - trick IE form and its expando attribute

博客分类：

javascript

javascript

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>

分享到：

javascript - trick to normalize href for ... | wpf Save a image using DrawingImage() an ...

2012-08-16 10:59
浏览 1040
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick IE form and its expando attribute

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick IE form and its expando attribute

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript expando and attributes

javascript - trick to getText and setText

javascript - trick/guideline to remove DOM element

最近访客更多访客>>