使用 jQuery 向 DOM 添加输入元素

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 中发生的所有事情都必须显示在网站 (View) 中。我不知道您使用什么代码来扫描条形码，但您根本不需要输入元素。 参见本站示例https://coderwall.com/p/s0i_xg/using-barcode-scanner-with-jquery

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

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

以下代码将带有标签“Hej”的p元素添加到div“#contentl1”

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

Answer 3

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

这是一种策略：

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

$(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>