Question

这是javascript：

function changeText(containerId) {
    var datatext = document.getElementById('masterText').value;
    var collection = document.getElementById(containerId).getElementsByTagName('INPUT');
    for (var x = 0; x < collection.length; x++) {
        if (collection[x].type.toUpperCase() == 'TEXTBOX')
            collection[x].value = datatext;
    }
}

这是html

<input id="masterText" type="textbox" onkeyup="changeText('divGrid')"><br />

<div id="divGrid">
<input type="textbox"><br />
<input type="textbox"><br />
<input type="textbox"><br />
<input type="textbox"><br />
</div>

假设所有文本框的值都会改变，但事实并非如此。你知道错误是什么吗？

Answer 1

正如我在评论中所说，textbox不是type元素的有效<input>。虽然未知类型默认为text，但它可能以某种方式弄乱了js（可能type属性不能正确处理未知类型），并且将其更改为text似乎工作正常，如你可以在这个jsbin中看到：http://jsbin.com/xakoxeyi/1/

我最好猜测为什么发生了这种情况，使用element.type对于未知类型无法正常工作，因此它没有值textbox，甚至虽然这就是html所说的。解决此问题的最佳方法是将所有内容更改为text（如上所述），但另一个好方法是使用collection[x].type，而不是使用collection[x].getAttribute('type')， getAttribute始终会为您提供HTML属性中的内容

Answer 2

只是为了扩展Markasoftware的说法：

如果您选择使用type获取属性getAttribute，那么您的代码就可以运行。

function changeText(containerId) {
    var datatext = document.getElementById('masterText').value;
    var collection = document.getElementById(containerId).getElementsByTagName('INPUT');
    for (var x = 0; x < collection.length; x++) {
        if (collection[x].getAttribute('type').toUpperCase() == 'TEXTBOX') {
            collection[x].value = datatext;
        }
    }
}

JSFiddle：http://jsfiddle.net/MSTUe/

因此，我的猜测是在幕后，未知类型被设置为text输入，但是如果需要，您仍然可以使用textbox查询输入。可能对于浏览器可能不支持的那些非常新的（但支持不足的）HTML5输入（如颜色，日期时间 - 本地，周等）。

onkeyup，从文本框中获取值，更新另一个文本框，不工作

2 个答案: