Блог

Главная - Вопросы по программированию - Задержка клавиатуры текстового поля ввода Chrome с несколькими динамическими полями

Задержка клавиатуры текстового поля ввода 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 = $('#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 полей ввода).). Я думал, что это связано с каким-то событием ввода, но я отключил все и вся на странице, проблема сохраняется. Я также тестировал эту страницу в 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 для удаленного извлечения, просто чтобы сделать его более переносимым и простым в использовании.

Комментарии:

1. Есть ли на входных данных какие-либо обработчики событий изменения?

2. Не могли бы вы воспроизвести проблему? Я не замечаю никакого замедления с 1000 строками по 5 входов в каждой ( codepen )

3. Никаких событий изменения, и я даже полностью отключил все ключевые события, все еще была проблема. Проблема все еще возникает, но я попытаюсь воспроизвести ее на совершенно новой, простой странице.

4. Отредактировал мой пост. Если ни у кого больше нет этой проблемы, я предполагаю, что это больше связано с машиной, чем с программным обеспечением, или, возможно, с их сочетанием.