哈哈小老虎's Blog

一. 背景

通常, 我们在使用表单时, 会给表单元素设置一个name属性, 这是再正常不过的操作, 但是, 现在我建议你, 最好不要将某个表单元素的name属性值设置为tags.

二. 为什么?

因为IE6+, Opera, Webkit中, 对于表单元素的elements对象, 有个名为tags的原生方法, 其作用是通过表单元素的标签名来获取表单元素, 如var o =oForm.elements.tags(‘input’)[0].

虽然几大浏览器都支持tags方法, 但对于一个特殊情况, 出现了两种结果: 当某个表单元素的name属性值为tags, oForm.elements.tags是表示的什么呢?

三. 两个例子

<form name="testForm1" action="" method="post">
     <input type="text" />
</form>
<script type="text/javascript">
     var oForm = document.getElementById('testForm');
     alert(oForm.elements['tags']);
</script>

<form name="testForm1" action="" method="post">
     <input type="text" name="tags" />
</form>
<script type="text/javascript">
     var oForm = document.getElementById('testForm');
     alert(oForm.elements['tags']);
</script>

三. 解决方法

• 1. 避免将name属性值设置为tags;
• 2. 不使用oForm.elements方式来获取表单元素;
• 3. 使用oForm.elements.namedItem(‘tags’)方式来获取(推荐), 该方式各浏览器均支持, 且不会出oForm.elements['tags']这样的问题.

四. 参考资源

http://stackoverflow.com/questions/787873/safari-native-code