Firefox дважды отображает поле , если id="DRCTRY" (но не в том случае, если id изменен)

#javascript #html #firefox

#javascript #HTML #firefox

Вопрос:

В приведенной ниже демонстрации поле формы отображается условно на основе того, что находится в другом поле (когда пользователь вводит «y» в поле вопроса, появляется условное поле).

Код Javascript устанавливает для свойства display значение «none», когда условное поле не требуется.

Это отлично работает, за исключением того, что Firefox дважды отображает первое текстовое поле ввода, когда условный элемент впервые становится видимым. Дополнительный «фантомный» рендеринг частично перекрывает другой контент, но исчезает, когда происходит другой ввод.

Действительно странно то, что проблема исчезает, если я меняю идентификатор на что-либо другое, кроме «DRCTRY». Похоже, что идентификатор «DRCTRY» является каким-то особенным или вызывает ошибку в Firefox! В Chrome этого не происходит.

Мой вопрос таков: могу ли я предположить, что конкретный используемый идентификатор вызывает эту проблему? Кто-нибудь видит что-нибудь неправильное в моем коде?

Снимок экрана ниже показывает посторонний разрыв поля ввода. Это было сделано сразу после того, как я ввел в него «y».

Вот код:

 <!DOCTYPE html>
<html>

<head> </head>

<body>

  <form>
    <!-- 
  Firefox 85.0.1 renders the first input box twice when 'y' is typed into it.
  The problem goes away if the id "DRCTRY" is changed to anything else.  
  HOW CAN THIS BE ?!?!
-->
    <label for='DRCTRY'>Show conditional part (y or n)?</label>
    <br />
    <input type='text' id='DRCTRY' name='DRCTRY' value='n' />
    <br />

    <div id='CONDDIV'>
      <p>
        <label for='COND1' id='COND1_label'>Items:</label><br />
        <input type='text' id='COND1' name='COND1' value=''>amp;nbsp;
      </p>
    </div>

  </form>

  <script>
    changed_func = function() {
      CONDDIV.style.display = DRCTRY.value.match(/^y/i) ? "inline" : "none";
    };
    DRCTRY.oninput = changed_func;
    changed_func(); // process initial value
  </script>

  <p>Next paragraph</p>

</body>

</html>

Развернуть фрагмент

А вот снимок экрана того, что я вижу в Firefox:
скриншот

1. Это не дополнительный элемент ввода, это поле для автозаполнения. Если вы не хотите видеть поле, установите autocomplete="off" для ввода.

2. это автозаполнение

3. Это не поле ввода, отображаемое дважды — это функция автозаполнения , которая предлагает ранее введенные значения, из которых вы можете выбрать сейчас. (И да, это обычно привязывается к именам полей.)

4. Я не вижу проблемы на скриншоте, не могли бы вы, пожалуйста, пояснить

5. Также я предлагаю вам определить переменные конкретно, вместо того, чтобы полагаться на браузер, затеняющий идентификатор как window.ID . Итак const condDiv = document.getElementById('CONDDIV');

Ответ №1:

Добавление autocomplete="off" к <input> элементу предотвращает «проблему».

Кроме того, использование document.getElementById("id") вместо теневого объекта, предоставленного браузером, позволяет избежать проблем, если идентификатор не является допустимым идентификатором JavaScript.