html - 如何在加载时填充输入文本？答案

【问题标题】：html - how to fill input text on load?html - 如何在加载时填充输入文本？
【发布时间】：2015-02-24 05:02:23
【问题描述】：

我在视图中有一个 HTML 表单，我需要使用来自服务器的 json 变量填写一些输入字段。我不想为每个输入字段编写 javascript 代码，而是想访问输入标记的 value 属性中的 json 变量。

我为input 标签测试了onload 事件，但没有任何效果。

<input type="text" class="form-control" onload="this.value = 'value';" name="company[name]" />

【问题讨论】：

输入标签不支持onload事件w3schools.com/jsref/event_onload.asp

标签： javascript jquery html json onload

【解决方案1】：

onload 事件与<body> 标签和其他一些标签一起使用，或者您也可以使用window.onload = function(){} 参见下面的示例代码

HTML

 <input type="text" class="form-control" name="company[name]" id="company_name"/>

JS 代码

window.onload = function(){
  document.getElementById("company_name").value = "value";
}

PS：id 将是唯一选择器，因此在输入元素中添加 id 属性。

您可以在window.onload事件匿名函数中使用右选择器访问所有元素

更新

@AlexanderO'Mara 建议

'onload' 受以下 HTML 标签支持：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

以及以下 Javascript 对象：

image, layer, window

【讨论】：

onload is supported by other tags than body。 input 不是其中之一。
不幸的是，该问题的公认答案已过时。第二个答案看起来更准确。说起来可能更简单，input 不支持onload。无论如何 +1。

【解决方案2】：

$('document').ready(function () {
   $('input').val('value')
})

$('document').ready(function() {
  $('input').val('value')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" name="company[name]" />

【讨论】：

【解决方案3】：

这是一个纯 JavaScript 解决方案。

保持<input> 元素的名称与 JSON 数据中的名称相同。我们的想法是使用 JSON 数据中的密钥访问 <input>。

这是工作代码 sn-p：

const values = {
  a: 5,
  b: 15
}

const keys = Object.keys(values)
const length = keys.length

for(let i = 0; i < length; i++){
    const key = keys[i]
    document.getElementsByName(key)[0].value = values[key]
}

<input type="text" class="form-control" name="a" />
<input type="text" class="form-control" name="b" />

【讨论】：

【解决方案4】：

试试这个解决方案。

<input type="text" autofocus>

【讨论】：