Question

我正在编写一个Web应用程序，它接受输入字段中条形码阅读器的条形码。用户可以输入他/她想要的任意数量的条形码（即没有预定限制的原因）。我想出了一个强力方法，它创建一个预定义的数量的隐藏输入字段，然后在输入每个条形码时依次显示下一个。以下是执行此操作的代码：

<form id="barcode1" name="barcode" method="Post" action="#">
    <div class="container"> 
        <label for="S1">Barcode 1 &nbsp </label>
        <input id="S1" class="bcode" type="text" name="S1" onchange="packFunction()" autofocus/>          
        <label for="S2" hidden = "hidden">Barcode 2  &nbsp </label>
        <input id="S2" class="bcode" type="text" hidden = "hidden" name="S2" onchange="packFunction()" />
        <label for="S3" hidden = "hidden">Barcode 3 &nbsp </label>
        <input id="S3" class="bcode" type="text" hidden = "hidden" name="S3" onchange="packFunction()" /> 
        <label for="S4" hidden = "hidden">Barcode 4 &nbsp </label>
        <input id="S4" class="bcode" type="text" hidden = "hidden" name="S4" onchange="packFunction()" />    
        <label for="S5" hidden = "hidden">Barcode 5 &nbsp </label>
        <input id="S5" class="bcode" type="text" hidden = "hidden" name="S5" onchange="packFunction()" />
    </div>

    <div class="submit">          
        <p><input type="submit" name="Submit" value="Submit"></p>
    </div>

</form>

<script>

$(function() {   
    $('#barcode1').find('.bcode').keypress(function(e){
        // to prevent 'enter' from submitting the form
        if ( e.which == 13 ) 
        {
            $(this).next('label').removeAttr('hidden')
                $(this).next('label').next('.bcode').removeAttr('hidden').focus();  
            return false;
        }
    }); 
});
</script>

这似乎是一个不优雅的解决方案。在输入每个条形码后创建新的输入字段似乎更好。我尝试使用jQuery在DOM中创建新的输入元素，我可以获得要显示的新输入元素。但它使用 onchange 事件，该事件检测原始输入字段中的更改。如何在新创建的输入字段中传输焦点并检测 onchange ？以下是我用来测试这个想法的代码：

<div>
   <input type="text" id="barcode" class="original"/>
</div>
<div id="display">
    <div>Placeholder text</div>
</div>
<script src="./Scripts/jquery-2.2.0.min.js"></script>    
$(function () {
    $('#barcode').on('change', function () {            
        $('#display').append('<input id='bcode' class='bcode' type='text' name='S1' autofocus/>')
        });
    });
</script>

一旦我有这些条形码，我将它们打包到数组中，然后我将它们发布到服务器端脚本以运行mySQL查询以基于条形码检索数据，然后将其发布回客户端。因此，我必须实现的部分原因是输入到不同输入字段的每个条形码都需要被推送到数组中。

是否有一种优雅的方法可以动态创建输入字段，然后检测那些输入字段中的更改以创建更多输入字段？

Answer 1

您尝试过的动态更新可以。如果必须在提交时将其推送到数组中，则必须防止表单提交默认，序列化表单然后发出ajax请求。

以下是一个例子：

$('form').on('submit',function(e){
    e.preventDefault();
    var formData = $(this).serializeArray();//check documentation https://api.jquery.com/serializeArray/ for more details
    $.ajax({
        type:'post',
        url:<your url>//or you could do $('form').attr('action')
        data:formData,
        success:function(){}//etc
    })
});

Answer 2

如果您不在html中显示条形码，则可以跳过输入字段并将读取的条形码存储在数组[]中。并非javascript中发生的所有内容都必须显示在网站上（查看）。我不知道你使用什么代码来扫描条形码但你根本不需要输入元素。请参阅此网站上的示例https://coderwall.com/p/s0i_xg/using-barcode-scanner-with-jquery

而不是console.log()来自条形码扫描器的数据可以简单地保存在数组[]中并从那里发送。

如果您想动态创建元素，请参阅此主题：dynamically create element using jquery

以下代码添加了带有标签＆＃34; Hej＆＃34;的p元素。到div＆＃34; #contentl1＆＃34;

`$("<p />", { text: "Hej" }).appendTo("#contentl1");`

Answer 3

更新：我添加了一些简单的CSS，使每个输入字段显示在自己的行上。

这是一个策略：

在输入框中侦听输入/返回键。
按下回车键（大概是在输入条形码后），创建一个新的输入框。
停止侦听原始输入上的回车键并开始在新输入上进行侦听。
当按下“全部提交”按钮时（或者当使用选项卡将焦点从最近的输入切换到“全部提交”按钮并按下输入时），然后收集数组中的所有输入值。

$(function() {
  var finishBarcode = function(evt) {
    if (evt.which === 13) {
      $(evt.target).off("keyup");
      $("<input class='barcode' type='text'/>")
        .appendTo("#barcodes")
        .focus()
        .on("keyup", finishBarcode);
    }
  };

  var submitBarcodes = function(evt) {
    var barcodesArr = $(".barcode").map(function() {
      return $(this).val();
    }).get();
    $("#display").text("Entered Barcodes: " + barcodesArr);
  };

  var $focusedInput = $('.barcode').on("keyup", finishBarcode).focus();
  var $button = $('#submitAll').on("click", submitBarcodes);
});

input.barcode {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Type barcode into input box</li>
  <li>To enter barcode and allow new entry, press Return</li>
  <li>To submit all barcodes, either press tab and then return or click Submit button</li>
</ul>
<div id="barcodes"><input type="text" class="barcode" /></div>
<div><button id="submitAll">Submit all barcodes</button></div>
<div id="display">Placeholder text</div>

使用jQuery

3 个答案: