HTML - 如何在加载时填充输入文本？

Question

HTML - 如何在加载时填充输入文本？

11

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

我尝试使用标签的onload事件进行测试，但它没有任何效果。

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

- hamed

输入标签不支持onload事件http://www.w3schools.com/jsref/event_onload.asp - Alien

4个回答

3

$('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]" />

- Vitorino fernandes

3

这里是一个纯JavaScript解决方案。

请将 <input> 元素的名称与JSON数据中的名称保持相同。思路是使用JSON数据中的键访问 <input>。

以下是可行的代码片段：

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" />

- Rahul Desai

0

尝试这个解决方案。

<input type="text" autofocus>

- Dnyanesh_B

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Girish · Accepted Answer

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";
}

注意：在输入元素中添加id属性，它将成为唯一的选择器。

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

更新：

由@AlexanderO'Mara建议

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

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

并且以下是JavaScript对象：

image, layer, window