input type=text event listener for when the text is cleared?

Question

In my JavaScript Metro app, I have an <input type="text"> element to which I would like to add an event listener for when the user clicks on the "x" that appears on the right side of the input box to clear the text.  What is the correct event that I should use?  I've tried "change" and "click", but neither of them are triggered by clicking on the "x".

Answer 1

Hi Rielyn,

I assume you do not care specifically about whether or not the action that clears the text is the click on the X or not.

It is no different for a Metro style app in HTML than in a browser.  You can sync the input event and test for empty.

Something like this:

…
WinJS.UI.processAll();
            document.getElementById("myText").addEventListener("input", inputevent);
        }
  function inputevent(e) {
       if(e.target.value.length === 0)
        {        outputTxt.innerText = "empty";
            }
    }
  

-Jeff

---

Jeff Sanders (MSFT)