この質問のために、機能的な JSfiddle を作成しました: http://jsfiddle.net/KSCLC/
UPC をスキャンまたは入力すると、表示用にテーブルに自動的に追加される簡単なページを作成しています。入力が終了してから 3 秒待機するタイマーを開始するコードをいくつか破棄し、テーブルに新しい行を作成して、入力された UPC とアイテム情報を表示します。
ただし、このコードにはいくつかの問題があります。(私の質問)
A.) UPC を手動で入力すると、新しい行アクションが複数回発生します (同じ upc に対して複数の行が挿入されます)。しかし、バーコード スキャナーで UPC をスキャンすると、アクションは 1 回だけ完了します。(どちらが正しい)
B.) フィールドから情報を削除すると (upc フィールドを空白にする)、新しい行アクションが再び発生しますが、空白行が挿入されます。
C.) 行の挿入後に upc フィールドを空白にしようとしましたが、そうはなりません。行の挿入後に配置しようとしupc='';
ましたが、うまくいきませんでした。私は次のように定義しましたupc
:
var upc=document.getElementById("UPC").value;
(以下とjsFiddleでわかるように。)
それでは、コードについて...
upc フィールドに単純な入力を使用しました。
<input type="text" id="UPC" name="UPC" class="form-control scanning" autofocus="autofocus" placeholder="Scan or enter UPC here" />
スキャンされたアイテムの簡単なテーブル
<div class="scannedItems">
<table class="table table-hover" id="ScannedItems">
<thead>
<tr>
<th>UPC</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>8754621160</td>
<td>Example Product</td>
<td>$5.00</td>
<td>5lbs</td>
<td>$25.00</td>
<td>
<a><span class="glyphicon glyphicon-plus" style="padding-right:15px"></span></a>
<a><span class="glyphicon glyphicon-minus"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
そして、私のJavascript
//setup before functions
var field = document.getElementById("UPC");
var typingTimer; //timer identifier
var doneTypingInterval = 3000; //time in ms, 3 seconds
//on keyup, start the countdown
$('#UPC').keyup(function () {
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$('#UPC').keydown(function () {
clearTimeout(typingTimer);
});
//user is "finished typing," do something
if (field.value.length == 0) {
//do nothing
} else {
function doneTyping() {
var upc = document.getElementById("UPC").value;
var table = document.getElementById("ScannedItems");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = upc;
cell2.innerHTML = "Example Description";
cell3.innerHTML = "$3.00";
cell4.innerHTML = "7lbs";
cell5.innerHTML = "$21.00";
cell6.innerHTML = "<a><span class='glyphicon glyphicon-plus' style='padding-right:15px;'></span></a><span> </span><a><span class='glyphicon glyphicon-minus'></span></a>";
upc = '';
}
}