使用 jQuery 将输入元素添加到 DOM

Adding input elements to the DOM using jQuery

本文关键字：添加 DOM 元素 输入 jQuery 使用      更新时间：2023-09-26

我正在编写一个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 事件，该事件检测原始输入字段中的更改。如何转移焦点并检测新创建的输入字段中的变化？这是我用来测试这个想法的代码：

<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查询以根据条形码检索数据，然后将其发布回客户端。因此，我必须实现的部分目标是，输入到不同输入字段中的每个条形码都需要推送到一个数组中。

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

您尝试过的动态更新没问题。如果必须在提交时将其推送到数组中，则必须防止表单提交的默认，序列化表单，然后发出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
    })
});

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

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

如果你想动态地创建元素，请参阅以下线程：使用 jquery 动态创建元素

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

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

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

这里有一个策略：

  • 侦听输入框上的回车键。
  • 按下回车键（大概是在输入条形码后）时，创建一个新的输入框。
    • 停止侦听原始输入上的回车
  • 键，并开始侦听新输入上的回车键。
  • 当按下"全部提交"按钮时（或使用 tab 将焦点从最近的输入转移到"全部提交"按钮并按下 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>

相关文章：