[JS] 为表单元素设置name属性的一个'陷阱'

一. 背景

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

 

二. 为什么?

因为IE6+, Opera, Webkit中, 对于表单元素的elements对象, 有个名为tags的原生方法, 其作用是通过表单元素的标签名来获取表单元素, 如

var o =oForm.elements.tags('input')[0].

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

 我们来看两个例子:

 

例一: 表单中不存在name属性值为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>

 FF: 输出undefined

 IE, Opera, Webkit: function tags() {native code}

 

例二: 表单中存在name属性值为tags的表单元素

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

 IE, FF, Opera: 输出元素引用

 Webkit: function tags() {native code}

 

 

三. 解决方法

1. 避免将name属性值设置为tags;

2. 不使用oForm.elements方式来获取表单元素;

3. 使用oForm.elements.namedItem('tags')方式来获取(推荐), 该方式各浏览器均支持, 且不会出现

oForm.elements['tags']这样的问题.

 

 

四. 参考资源

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

 

本文来源于http://blog.163.com/thinker_creator/blog/static/10193314920099154483904/