Блог

Главная - Вопросы по программированию - Событие для очистки ввода в устаревшем Edge (версия 44)

Событие для очистки ввода в устаревшем Edge (версия 44)

#javascript #microsoft-edge

#javascript #microsoft-edge

Вопрос:

У меня есть простое поле ввода html

 <input id="query" type="text" oninput="QueryInput(this.value)"  onchange="QueryChange(this.value)">

и я пробовал разные способы захвата события clear ( x появляется справа от текстового поля, когда я вхожу с помощью мыши, чтобы ввести что-то там) в Edge (моя версия — Microsoft Edge 44.18362.449.0).

 <p id="demo_typed"></p>
<p id="demo_typing"></p>
<p id="demo_oninput"></p>
<p id="demo_onchange"></p>

<script>
function QueryChange(query) {
  document.getElementById("demo_onchange").innerHTML = `You changed to ${query}`;
}
function QueryInput(query) {
  document.getElementById("demo_oninput").innerHTML = `You inputted ${query}`;
}
document.getElementById("query").addEventListener('input', (event) => {
  document.getElementById("demo_typing").innerHTML = `You are typing ${event.target.value}`;
});
document.getElementById("query").addEventListener('change', (event) => {
  document.getElementById("demo_typed").innerHTML = `You typed ${event.target.value}`;
});
</script>

но ни один из них не реагирует на событие очистки (за исключением изменения, которое может быть вызвано после него, когда мышь покидает ввод): разве это не выполнимо?

Вот доступный для выполнения фрагмент:

 function QueryChange(query) {
  document.getElementById("demo_onchange").innerHTML = `You changed to ${query}`;
}
function QueryInput(query) {
  document.getElementById("demo_oninput").innerHTML = `You inputted ${query}`;
}
document.getElementById("query").addEventListener('input', (event) => {
  document.getElementById("demo_typing").innerHTML = `You are typing ${event.target.value}`;
});
document.getElementById("query").addEventListener('change', (event) => {
  document.getElementById("demo_typed").innerHTML = `You typed ${event.target.value}`;
}); 
 <p><strong>Note:</strong> The question is specific to Legacy Edge, not the newer Chromium-based Edge.</p>

<input id="query" type="text" oninput="QueryInput(this.value)"  onchange="QueryChange(this.value)">

<p id="demo_typed"></p>
<p id="demo_typing"></p>
<p id="demo_oninput"></p>
<p id="demo_onchange"></p>

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

1.Кстати, также Internet Explorer (например, версия 1909 в Windows 10) имеет этот «x» для очистки ввода, но слегка измененная версия для IE работает, и оба input addEventListener и oninput реагируют на событие очистки.

2. Просто из любопытства, зачем вам поддерживать устаревший Edge? Пользователи должны очень стараться не переходить на Chromium Edge, поэтому в дикой природе его пользователей практически не должно быть…

3. @T.J.Crowder это версия, которую я нахожу установленной на моем корпоративном ноутбуке (это довольно крупная компания в Италии с большим отделом ИКТ. Честно говоря, я не знаю о версии, которую они устанавливают в офисах за рубежом). Итак, в моей компании, я думаю, много пользователей интрасети. Но хорошо, это не настоящая проблема, мы можем использовать Chrome (или firefox), просто чтобы знать.

4. Спасибо! Мне просто любопытно, это не меняет и не отменяет вопрос. (Кстати, я думаю, что я где-то видел этот вопрос раньше, но я не нахожу его здесь, на SO. К сожалению, я думаю, что ответ был «нет, события нет».)

5. @T.J.Crowder Они подтвердили, что мы выпускаем обновление для всех наших пользователей в ближайшие месяцы, так что все в порядке 😉

Ответ №1:

Предполагая, что

нет, события нет.

ответ, как предложил Т.Дж. Краудер в своем комментарии, лучший совет, который я нашел, — скрыть кнопку очистки края с помощью стиля

 <style>
input::-ms-clear {
    display: none
}
</style>

и, возможно, добавьте мою пользовательскую кнопку очистки.

Например, если ввод заключен в

 <form id="myForm" onsubmit="event.preventDefault();">

очистка может быть реализована с помощью сброса формы и выполнения всех необходимых действий по сбросу

 function clear_input() {
  document.getElementById("myForm").reset();
  document.getElementById("demo_typed").innerHTML = '';
  document.getElementById("demo_typing").innerHTML = '';
  document.getElementById("demo_oninput").innerHTML = '';
  document.getElementById("demo_onchange").innerHTML = '';
}

document.getElementById("myBtnClear").addEventListener("click", function() {
  clear_input();
});

Альтернативное решение, без скрытия четкого края

В противном случае, как предложено в репозитории Angular github и адаптировано мной здесь для ванильного Javascript, можно подписаться на mouseup событие в качестве обходного пути и перехватить очистку края следующим образом:

 document.getElementById("query").addEventListener('mouseup', (event) => {
  beforeVal = event.target.value;
  setTimeout(() => {
    afterVal =event.target.value;
    if (beforeVal !== '' amp;amp; afterVal === '') {
        clear_input();
    }
  }, 1);
  
});