Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html text input onchange event

is there a way to implement a text change event to detect text change on an HTML input text field?
It's possible to simulate these using key events (key press etc), however, it's really not performant and difficult, is there a better way?

like image 780
user775187 Avatar asked May 29 '11 17:05

user775187


People also ask

How do I use Onchange input field?

The onchange attribute fires the moment when the value of the element is changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus.

How do you add Onchange to HTML?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

How do you trigger an event when a textbox is filled with value?

change function , but that needs to be done only if the the value is changed using the button . $("#address"). change will trigger if you perform any change in text field. If you want to trigger alert only when button click why you don't use alert inside button click function.


2 Answers

onChange doesn't fire until you lose focus later. If you want to be really strict with instantaneous changes of all sorts, use:

<input    type       = "text"     onchange   = "myHandler();"    onkeypress = "this.onchange();"    onpaste    = "this.onchange();"    oninput    = "this.onchange();" /> 
like image 69
DragonLord Avatar answered Oct 16 '22 13:10

DragonLord


When I'm doing something like this I use the onKeyUp event.

<script type="text/javascript">  function bar() {       //do stuff  } <input type="text" name="foo" onKeyUp="return bar()" /> 

but if you don't want to use an HTML event you could try to use jQuerys .change() method

$('.target').change(function() {    //do stuff }); 

in this example, the input would have to have a class "target"

if you're going to have multiple text boxes that you want to have done the same thing when their text is changed and you need their data then you could do this:

$('.target').change(function(event) {    //do stuff with the "event" object as the object that called the method )}; 

that way you can use the same code, for multiple text boxes using the same class without having to rewrite any code.

like image 44
CaffeinatedCM Avatar answered Oct 16 '22 13:10

CaffeinatedCM