Question

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

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

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

Answer 1

onload事件适用于<body>代码和其他一些代码，或者您也可以使用window.onload = function(){}查看以下示例代码

<强> HTML

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

JS CODE

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

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

您可以使用window.onload事件匿名函数

中的右选择器访问所有元素

更新

@ AlexanderO'Mara建议

以下HTML标记支持

'onload'：

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

以下Javascript对象：

image, layer, window

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是一个纯/ vanilla 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" />

Answer 4

尝试此解决方案。

<input type="text" autofocus>

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

4 个答案: