CODEWITHSUNDEEP
javascriptmicrosoft-edge
user11323942
user11323942

Reputation:

Event for clear input in Legacy Edge (version 44)

I have a simple html input field

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

and I've tried different ways to capture the clear (an x shows up in the right of the textbox when I enter with mouse to type something there) event in Edge (my version is 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>

but none of them reacts on the clear event (except for the change that can be triggered after it, when the mouse leaves the input): is it not doable?

Here's a runnable snippet:

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>

Upvotes: 1

Views: 253

Answers (1)

user11323942
user11323942

Reputation:

Assuming a

no, there's no event.

answer, as T.J. Crowder suggested in his comment, the best advice I found is to hide the Edge clear button with a style

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

and possibly add my custom clear button.

For example, if the input is wrapped in a

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

the cleanse could be implemented via a form reset and running all the needed reset actions

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();
});

Alternative solution, without hiding the Edge clear

Otherwise, as proposed in the Angular github repo and adapted here to vanilla Javascript by me, one could subscribe the mouseup event as a workaround and intercept the Edge clear as follows:

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

Upvotes: 1

Related Questions