Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript - run function on <input> change - NO JQUERY

I want to run a function when a HTML <input/> tag changes. How do I do this? There are some answers for this but they are all in jQuery and I want plain javascript. Can someone give me a simple example? Thanks!

I want the input to be a type as text:

<input type="text" id="change">
like image 953
Roy Berris Avatar asked Jun 12 '15 15:06

Roy Berris


People also ask

Can I change input type JavaScript?

To change the type of input it is (button to text, for example), use: myButton. type = "text"; //changes the input type from 'button' to 'text'. Another way to change or create an attribute is to use a method like element.

What is $() in JavaScript?

$() The $() function is shorthand for the getElementByID method, which, as noted above, returns the ID of a specific element of an HTML DOM. It's frequently used for manipulating elements in a document. $() allows for shorter and more efficient JavaScript coding.

How do you automatically call a function in HTML?

In this method, we will create and define a function in the HTML document's head section. To invoke this function in the html document, we have to create a simple button and using the onclick event attribute (which is an event handler) along with it, we can call the function by clicking on the button.


1 Answers

You can use the input event. This will trigger not only on key up and paste, but also other text modification events such as drag & drop.

change.addEventListener("input", function (e) {
    alert(this.value);
});
<input type="text" id="change">
like image 86
CodingIntrigue Avatar answered Oct 06 '22 09:10

CodingIntrigue