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?
-
4Please give more details. What do you NEED to do - without already thinking of ways to do it. For example if the field receives input from a bar code scanner, then I would MONITOR the field instead of using keyup/press or onchangemplungjan– mplungjan2011-05-29 17:54:45 +00:00Commented May 29, 2011 at 17:54
-
1@mplugjan: user types into a textbox to search a query, and the output area gets updated constantlyuser775187– user7751872011-05-30 06:06:21 +00:00Commented May 30, 2011 at 6:06
-
Please refer to this for the most up-to-date answer: stackoverflow.com/a/26202266/1211622Kamran– Kamran2021-01-15 00:18:53 +00:00Commented Jan 15, 2021 at 0:18
-
Does this answer your question? Best way to track onchange as-you-type in input type="text"?Kamran– Kamran2021-01-15 00:20:27 +00:00Commented Jan 15, 2021 at 0:20
Add a comment
|
5 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();"
/>
Comments
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.
4 Comments
user775187
is jquery's change event implemented using keyup events?
CaffeinatedCM
@user775187 no, I think it's the onChange event that it implements because you can also use the change event for things like radio buttons, selection lists, check boxes, ect.
Jasper
-1: "but if you don't want to use a html event you could try to use jQuerys .change() method." There's a lot of options between using the event attribute in your html and using jQuery. The suggestion that there isn't is rather misleading. On top of that, it's also not very clear from your answer that these two things actually bind to completely different events.
Kamran
Please refer to this for the most up-to-date answer: stackoverflow.com/a/26202266/1211622
Well unless I misunderstand you can just use the onChange attribute:
<input type="text" onChange="return bar()">
Note: in FF 3 (at least) this is not called until some the user has confirmed they are changed either by clicking away from the element, clicking enter, or other.
Comments
I used this line to listen for input events from javascript.
It is useful because it listens for text change and text pasted events.
myElement.addEventListener('input', e => { myEvent() });
Comments
Use the oninput event
<input type="text" oninput="myFunction();" />
