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

Question

我有一个护照扫描器，它扫描文档并在每次扫描时都打印出以下格式。它会刚刚开始将它写入到它看到的任何打开的textarea。

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或只是简单的JavaScript来填充像这样的字段：

的jQuery：

$('#surname').val('surnameValue'); 

普通的JavaScript：

document.getElementById('forenames').value = 'forenamesValue'; 

这里是一个codepen

Answer 2

那么你可以生成使用一个小的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>