Javascript 带有多个动态字段的Chrome输入文本字段键盘延迟_Javascript_Jquery_Html_Google Chrome

Javascript 带有多个动态字段的Chrome输入文本字段键盘延迟

javascript jquery html google-chrome

Javascript 带有多个动态字段的Chrome输入文本字段键盘延迟,javascript,jquery,html,google-chrome,Javascript,Jquery,Html,Google Chrome,希望我的标题很容易理解。我有一个表单，需要允许动态数量的输入字段集。也就是说，用户可以添加包含5个文本字段的新表行。我使用jQuery添加这些行，获取基本行，克隆它，清空克隆中的所有文本值，并将其附加到表体。缩写代码如下： var num = $('#num').val().replace(/[^0-9]/g, ''); var numAdd = 1; // default, add only 1 new row if (num.length > 0) { var baseRow

希望我的标题很容易理解。我有一个表单，需要允许动态数量的输入字段集。也就是说，用户可以添加包含5个文本字段的新表行。我使用jQuery添加这些行，获取基本行，克隆它，清空克隆中的所有文本值，并将其附加到表体。缩写代码如下：

var num    = $('#num').val().replace(/[^0-9]/g, '');
var numAdd = 1; // default, add only 1 new row
if (num.length > 0) {
  var baseRow = $('#base'); // this is a tr tag
  numAdd = parseInt(num);
  if (numAdd >= 1) {
    for (var i = 1; i <= numAdd; i++) {
      var newRow = $(baseRow).clone();
      $(newRow).find('input').val('');
      $('#rows').append(newRow); // this is a tbody tag
    }
  }
}

var num=$（'#num'）.val（）.replace（/[^0-9]/g'）；
var numad=1；//默认情况下，仅添加1个新行
如果（num.length>0）{
var baseRow=$（'#base'）；//这是一个tr标记
numad=parseInt（num）；
如果（numad>=1）{
对于（变量i=1；i 0）{
var baseRow=$（“#base”）；
numad=parseInt（num）；
如果（numad>=1）{
对于（var i=1；i）输入上有任何更改事件处理程序吗？您能重现这个问题吗？我没有注意到1000行中每个行有5个输入（）的速度减慢没有更改事件，我甚至完全禁用了所有关键事件，仍然存在问题。问题仍然存在，但我将尝试在一个全新的、基本的页面中重现它。编辑了我的帖子。如果没有其他人有此问题，我将假设它与机器的关系大于软件，或者两者的结合。
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#add').click(function(){
        var num = $('#num').val().replace(/[^0-9]/g, '');
        var numAdd = 1;
        if (num.length > 0) {
          var baseRow = $('#base');
          numAdd = parseInt(num);
          if (numAdd >= 1) {
            for (var i = 1; i <= numAdd; i++) {
              var newRow = $(this).closest('tr').clone();
              $(newRow).find('.bte').html('<span class="remove">remove</span>');
              $(newRow).find('.btn').html('');
              $(newRow).find('input').val('');
              $('#rows').append(newRow);
            }
          }
        }
      });
      });
    </script>
  </head>
  <body>
    <table id="list">
        <thead>
          <tr>
            <th class="btg">Field 1</th>
            <th class="btd">Field 2</th>
            <th class="btm">Field 3</th>
            <th class="btq">Field 4</th>
            <th class="btv">Field 5</th>
            <th class="bte"></th>
            <th class="btn"></th>
          </tr>
        </thead>
        <tbody id="rows">
          <tr>
            <td>
              <input type="text" value="1" readonly="readonly" style="width:60px;">
            </td>
            <td>
              <input type="text" value="" style="width:300px;">
            </td>
            <td>
              <input type="text" value="" style="width:60px;">
            </td>
            <td>
              <input type="text" value="" style="width:60px;">
            </td>
            <td>
              <input type="text" value="" style="width:60px;">
            </td>
            <td class="bte">
              <span id="add">add</span>
            </td>
            <td class="btn">
              <input type="text" id="num" value="" maxlength="2" placeholder="num rows to add">
            </td>
          </tr>
        </tbody>
      </table>
  </body>
</html>