IE 10：无法获取名称仅由数字组成的元素

Question

我在使用 IE 10 时遇到了这个问题。我在 HTML 页面的表单中有这段代码：

<input type='hidden' name='X123' />
<input type='hidden' name='123' />
<input type='hidden' name='00123' />

如果我运行这个JS命令：

document.forms['MyForm'].elements[name];

其中 name 是输入的名称，我只能得到第一个 ('X123')。在其他两种情况下，函数 returns undefined。我在 IE 10 和 Firefox 上测试过它。在 Firefox 上有效。不过在IE下得运行。这是一个 MWE：

<html><head><script type='text/javascript'>
function println(text) {
    document.getElementById('output').innerHTML += '<p>' + text + '</p>';
}
function test() {
    println('X123 = '  + document.forms['MyForm'].elements['X123']);
    println('123 = '   + document.forms['MyForm'].elements['123']);
    println('00123 = ' + document.forms['MyForm'].elements['00123']);
}
</script></head><body onload='test();'><form name='MyForm'>
<input type='hidden' name='X123' />
<input type='hidden' name='123' />
<input type='hidden' name='00123' />
</form><div id='output'></div></body></html>

我需要知道这是否是 IE 的已知行为。

更好的解释：我在工作中遇到了这个问题。我制作了 HTML 你看到的 只是为了复制问题 （这不是教程）。我知道我可以使用 jQuery 或其他方法按名称获取元素，但我需要知道这是否是 IE 的已知行为，因为我在网上找不到任何相关信息。

Answer 1

I need to know if this is a known behavior of IE.

不只是IE； that code doesn't work on Chrome or Firefox either, for the 123 element. Grundy seems to have found the relevant info 关于原因，即全数字名称会导致与基于索引的访问混淆，因此无法按名称使用。

...and if exists a workaround.

是的，您可以改用 querySelector（适用于所有现代浏览器，以及 IE8）。我手边没有 IE10，但它适用于 IE8、IE9、IE11、Chrome 和 Firefox（原始代码在其中任何一个中都不起作用）所以我想说它几乎肯定有效在 IE10 上也是如此：

println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]'));
println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]'));
println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]'));

请注意 [name="value"] 中值的引号很重要，否则以数字开头的引号是 CSS 语法错误。

实例：

function println(text) {
    document.getElementById('output').innerHTML += '<p>' + text + '</p>';
}
function test() {
    println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]'));
    println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]'));
    println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]'));
}
test();

<form name='MyForm'>
<input type='hidden' name='X123' value="X123 value"/>
<input type='hidden' name='123' value="123 value"/>
<input type='hidden' name='00123' value="00123 value" />
</form><div id='output'></div>

如果你想要它们的值：

println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]']).value);
println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]']).value);
println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]']).value);

function println(text) {
    document.getElementById('output').innerHTML += '<p>' + text + '</p>';
}
function test() {
    println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]').value);
    println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]').value);
    println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]').value);
}
test();

<form name='MyForm'>
<input type='hidden' name='X123' value="X123 value"/>
<input type='hidden' name='123' value="123 value"/>
<input type='hidden' name='00123' value="00123 value" />
</form><div id='output'></div>

Answer 2

我建议您避免使用以数字开头的名称或 ID，如 HTML4 specification 所说。

您可以通过在名称前加上一些内容来解决这个问题，例如：

name="123"  -->  name="whatever-123"

Answer 3

您的代码：

document.forms['MyForm'].elements[name];

这是数字名称问题的原因是因为 .elements 可以作为集合引用——即使用数字引用来按顺序获取字段——以及名称。

因此，给它一个数字名称意味着它会混淆您指的是名为“123”的元素还是表单中的第 123 个元素。你说的是前者，但它试图给你后者。

解决方法很简单：只需为它们添加一个字母前缀即可。

IE 10：无法获取名称仅由数字组成的元素

IE 10: cannot get elements with name composed with only digit

html

javascript

internet-explorer

internet-explorer-10