Как очистить (сбросить) в JavaScript тип ввода электронной почты после заполнения его пробелами (in.value = "" не работает)

Question

Когда заполнить вход (type="email") только только пробелами и хотите очистить его (value === "") с помощью JavaScript, он не работает.Рассмотрим следующий код ( ссылка ):

<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button onclick="document.getElementById('myEmail').value = '';">Try it</button>

Но тот же код с типом ввода text или password работает!Я тестирую в Chrome.

РЕДАКТИРОВАТЬ: Да, с использованием setAttribute работает.Но если вы не хотите изменять атрибут ввода, какое-либо решение?

Answer 1

Вместо того, чтобы устанавливать атрибут value напрямую, установите атрибут «value» вашего электронного письма, выполнив следующие действия:

document.getElementById("btn").addEventListener("click", function() {

  // Remove this:
  // document.getElementById("myEmail").value = "";

  // Replace with this:
  document.getElementById("myEmail").setAttribute("value", "");
})

E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">

<button id="btn">Try it</button>

<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>

Этот метод заставляет браузер повторно визуализировать поле ввода, чтобы представленное значение соответствовало заданному атрибуту (то есть "").

Почему ваш оригинальный метод не работает;Насколько я понимаю, внутренне атрибут value DOM типа ввода электронной почты «обрезается», что означает, что чтение или установка значения, дополненного пробелами, не отличается от того же значения без пробелов.Поэтому обновление значения до "" с " " будет считаться обновлением «того же значения» и будет игнорироваться.

Answer 2

Здесь ввод будет пустым, если только строка. Отредактировано, чтобы отразить наблюдение Дакре. Установка input.value не обновила фактический элемент управления.

document.addEventListener('DOMContentLoaded', function() {

  document.querySelector('button').addEventListener('click', function() {
    let email = document.getElementById('myEmail');
    email.setAttribute('value', email.value.trim());
        
    console.log(email.value.length);
    
  });

});

<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button >Try it</button>