javascript - 使用 jQuery/Javascript 自动将数据填充到字段中

Question

我有一个护照扫描仪，它可以扫描文档并在每次新扫描时打印出以下格式。它会开始将其写入它看到的任何打开的文本区域。

START
Surname: SOMETHING
Forenames: NAME
Date of Birth: 10-10-91
Expiry Date:
Issue Date:
Document: PASSPORT
Doc. Number: 150150150
Issuing State: USA
Nationality: USA
Address Street:
Address City:
Address State:
Address Postal Code:
Address Country: USA
Height:
Weight:
Hair Color: BLACK
Eye Color: RED
END

信息进入文本字段，如下所示:

我想为这些信息准备字段，当我刷护照时，它会把它们全部填满。我从来没有过期过这样的事情，正在寻找如何解决这个问题的想法？

表单可以如下所示:

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Passport scanner</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="surname">Surname</label>
  <div class="controls">
    <input id="surname" name="surname" type="text" placeholder="" class="input-xlarge">

  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="forenames">Forenames</label>
  <div class="controls">
    <input id="forenames" name="forenames" type="text" placeholder="" class="input-xlarge">

  </div>
</div>

</fieldset>
</form>

Answer 1

你可以使用一点 jQuery 从你的数据生成表单，尽管你可能真的需要一个静态表单 -

$(document).ready(function() {
  var passportArray = $("#scanned").val().trim().split("\n");
  passportArray.shift();
  passportArray.pop();
  for (var i = 0; i < passportArray.length; i++) {
    var line = passportArray[i].split(":");
    var name = line[0].trim().toLowerCase().replace(/ /g, "_");
    var $div = $("<div>").attr("class", "control-group");
    $div.append("<label>").attr({
      class: "control-label",
      for: name
    }).text(line[0]);
    var $innerDiv = $("<div>").attr("class", "controls");
    var $input = $("<input>").attr({
      id: name,
      name: name,
      type: "text",
      placeholder: "",
      class: "input-xlarge"
    }).val(line[1].trim());
    $innerDiv.append($input);
    $div.append($innerDiv);
    $("#passport_form fieldset").append($div);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="scanned">
  START 
  Surname: SOMETHING 
  Forenames: NAME 
  Date of Birth: 10-10-91 
  Expiry Date: 
  Issue Date: 
  Document: PASSPORT 
  Doc. Number: 150150150 
  Issuing State: USA 
  Nationality: USA 
  Address Street: 
  Address City: 
  Address State: 
  Address Postal Code: 
  Address Country: USA 
  Height: 
  Weight: 
  Hair Color: BLACK 
  Eye Color: RED 
  END
</textarea>

<form id="passport_form" class="form-horizontal">
  <fieldset>

    <!-- Form Name -->
    <legend>Passport scanner</legend>

  </fieldset>
</form>