自動使用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>