Question

我正在研究一个项目，为了测试它，我每次重新加载页面时都需要填充大量的“输入”元素。我每次都填写相同的数字，所以我需要'输入'元素以某种方式“记住”它们给出的值。我看过一个带有'autocomplete'属性的例子，但是我必须从每个输入元素的下拉框中选择值，这对我没用。

有没有什么办法可以用预先写好的数据对输入标签进行编码？或者也许使用javascript？

Answer 1

使用jQuery，您可以编写一个插件来根据数据设置字段输入。

你可以在没有jQuery的情况下做同样的事情，但你需要找到所有输入，textareas，选择等，并在设置值之前过滤掉表单中的其他垃圾。

请查看此问题以获取更多提示：Using jQuery and JSON to populate forms?

(function($) {
  $.fn.populateData = function(data) {
    var $form = this;
    $.each(data, function(key, value) {
      $('[name=' + key + ']', $form).val(value);
    });
  }
})(jQuery);

var pocForm = document.forms['poc-form'];
var pocFormData = {
  fname : 'John',
  lname : 'Doe',
  dob : '1970-12-25'
};

$(pocForm).populateData(pocFormData);

.form-field {
  margin-bottom: 0.25em;
}
.form-field label {
  display: inline-block;
  width: 6em;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="poc-form">
  <div class="form-field">
    <label for="poc-fname">First Name:</label>
    <input type="text" id="poc-fname" name="fname" />
  </div>
  <div class="form-field">
    <label for="poc-lname">Last Name:</label>
    <input type="text" id="poc-lname" name="lname" />
  </div>
  <div class="form-field">
    <label for="poc-dob">Date of Birth:</label>
    <input type="date" id="poc-dob" name="dob" />
  </div>
</form>

Answer 2

这里是输出值

<form >
  First name: <input type="text" name="fname" value="John"><br>
  Last name: <input type="text" name="lname" value="Doe"><br>

</form>

Answer 3

在您的输入中，您可以使用value标记并设置默认值。

<input type="text" name="example" value="Value Goes Here">

Answer 4

您可以或多或少告诉自动填充如何工作：https://html.spec.whatwg.org/multipage/forms.html#autofill

但它仍然留给浏览器。

更好的选项是日期列表，为您提供文本输入，其中包含自动填充和下拉菜单的预定义选项。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
  <input list="browsers" name="myBrowser" />
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

修改

再次阅读你的问题之后，我意识到这对你的用例来说并不是很好。抱歉。

在这种情况下，我只需要使用一行jQuery：

$('input[type="text"]').val('Hello world') ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="t1" /> <input type="text" name="t2" /> <input type="text" name="t3" /> <input type="text" name="t4" /> <input type="text" name="t5" /> <input type="text" name="t6" /> <input type="text" name="t7" />

Answer 5

使用Javascript，您可以在字符串中使用静态文本：

var mystring = "This is my string of text";
var anotherString = "A second string of text";

var myInputs = document.getElementsByTagName("input");


myInputs[0].value = mystring;
myInputs[1].value = anotherString;

如果您需要来自用户输入数据的文本，则需要先保存文本：

tx = myInputs[0].value
localStorage.setItem("item_name", tx);
//note: you would need to use a keyup event or button to save the data as the user types or clicks the button.  Also look in to JSON "stringify" and "parse" to save more complex items.

保存好希望的数据后，将其调用并指向您想要的输入。

var savedTx = localStorage.getItem("item_name");

if (savedTx) {//it's important to look for the data first to avoid errors
   myInputs[0].value = "My data: " + savedTx + "!";
}

如何使用预先编写的数据生成html <input />标记

5 个答案: