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

onkeyup, get value from textbox, update another textbox, not working

本文关键字：文本 另一个 工作 更新 Onkeyup 获取      更新时间：2023-09-26

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>

假设所有文本框的值都将改变，但事实并非如此。你知道误差是多少吗?

正如我在评论中所说，textbox不是<input>元素的有效type。虽然未知类型默认为text，它可能在某种程度上搞砸了js(也许类型属性不与未知类型正确工作)，并将其更改为text似乎工作得很好，正如您在此jsbin中看到的:http://jsbin.com/xakoxeyi/1/

我对为什么发生这种情况的最好猜测是使用element.type对未知类型不起作用，所以它没有值textbox，尽管这就是html所说的。解决这个问题的最好方法是将所有内容改为text(如上所述)，但另一个好方法是，而不是使用collection[x].type，使用collection[x].getAttribute('type')，因为使用getAttribute总是给你HTML属性

中的内容

就markassoftware所说的进行扩展:

如果您选择使用getAttribute获取属性type，那么您的代码将正常工作。

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输入(如color, datetime-local, week等)。

相关文章：