Question

希望我的标题很容易理解。我有一个表单需要允许动态数量的输入字段集。也就是说，用户可以添加包含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
    }
  }
}

我注意到的是，我添加到页面的动态行越多，键入这些字段时的键盘滞后越大，但它会以大约10行（50个左右的输入字段）快速启动。我认为这与一些keyup事件有关，但我在页面上禁用了所有内容，问题仍然存在。我也在Firefox和Edge中测试了这个页面，它们都没有问题，似乎与Chrome隔离。

Chrome中是否存在此行为的已知原因，或者这更像是浏览器本身的问题？

编辑＃1 添加我用来复制此问题的完整代码：

<!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>

当添加35行，并开始输入一行时，我注意到滞后，但它似乎不那么严重，在某些情况下几乎不存在。如果我打开另一个播放音乐的Chrome窗口，则问题会变得更加严重。该窗口关闭后问题仍然存在。很难知道是否相关。

另外，如果我只创建这个直接35行以上的页面，而不是动态的，从不会出现任何键盘滞后。

Firefox仍然没有这个问题，即使我运行多个标签和播放音乐。

这很奇怪。也许它与我的实际笔记本电脑设置有关，而不是Chrome本身，或两者的结合。一旦我在桌面上回家，我就要测试一下。

编辑＃2 更改了要远程拉取的jQuery，只是为了使它更便于携带和使用。

Chrome输入文本字段键盘滞后，包含多个动态字段

0 个答案: