加载页面后，如何将值加载到输入文本字段中？答案

【问题标题】：How do I load values into input text fields once the page is loaded?加载页面后，如何将值加载到输入文本字段中？
【发布时间】：2014-07-17 17:34:16
【问题描述】：

现在我正在尝试以下代码，但在页面加载时我的任何输入文本框中都不会出现任何内容。

HTML：

<body onload="test()">
<input type="text" id="line0"></input>
<br>
<input type="text" id='line1'></input>
<br>
<input type="text" id='line2'></input>
</body>

Javascript：

function test() {
    var value = "test|some|thing";
    var valueArray = value.split("|");
    for (var lineNumber=0; lineNumber < valueArray.size(); lineNumber++) 
    {
        line = "line" + lineNumber;
        document.getElementById(line).value = valueArray[lineNumber];
    }
}

JFiddle：http://jsfiddle.net/mWL9m/1/

在我的实际代码中，我将从函数外部引入一个值，但这并不重要。现在我只是使用测试值value。

我查看了几个不同的线程，但似乎都集中在onclick 而不是onload。

【问题讨论】：

答案就在这里：stackoverflow.com/questions/3698200/…
您的 html 标记有问题，输入元素和 br 会自动关闭。

标签： javascript jquery html

【解决方案1】：

<script>
document.onreadystatechange = function() 
{
    Javascript code goes here
}
</script>

或

<script>
window.onload = function()
{
    Javascript code goes here
}
</script>

【讨论】：

【解决方案2】：

您使用了错误的属性来获取数组的大小。用户 .length 而不是 .size()。

示例：http://jsfiddle.net/u2g2p/1/

function test() {
    var value = "test|some|thing";
    var valueArray = value.split("|");
    for (var lineNumber=0; lineNumber < valueArray.length; lineNumber++) 
    {
        line = "line" + lineNumber;
        document.getElementById(line).value = valueArray[lineNumber];
    }
}

【讨论】：

【解决方案3】：

您的小提琴有 2 个问题。首先是你应该使用length而不是size()来获取你的数组的长度（我不相信Javascript数组有内置的大小方法）：

for (lineNumber=0; lineNumber < valueArray.length; lineNumber++) {

第二个是由于您的测试函数的声明范围，在加载时找不到它。阅读：

JavaScript not running on jsfiddle.net

然后改变

function test() {

到这里：

window.test = function() {

【讨论】：

【解决方案4】：

更新了你的小提琴，这里是代码。

(function(){ //This replaces the onload by executing the code within this annonymous function once the page loads.
var value = "test|some|thing";  //No edits here
var lineNumber = 0; //No edits here
var valueArray = value.split("|");
for (lineNumber=0; lineNumber < valueArray.length; lineNumber++) { //using .length instead of size and initialized lineNumber again, mostly because I like to keep my initialization in the loop, personal preference.
    var lineid = "line" + lineNumber; // It was missing "var", changed the variable name too
    var currentLine = valueArray[lineNumber];  //same deal
    var inputElem=document.getElementById(lineid); //I get the element before accessing the value property, again, preference mostly
    inputElem.value = currentLine; //same code.
} //End of for loop
})(); //end of the annonymous function

【讨论】：

这解决了问题，但我同意 filoxo，简短的解释会很有帮助！

【解决方案5】：

它是数组中对象数量的.length。

/*Javascript*/

function test(){
    var testVal = "test|some|thing";
    testValArr = testVal.split('|');

    for (i = 0; i < testValArr.length; i++) { 

     document.getElementById('line' + i).value = testValArr[i];
  }
}

【讨论】：