A PHP Error was encountered

Severity: 8192

Message: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated

Filename: libraries/Filtered_db.php

Line Number: 23

How to Detect Change in a Text Input Box in jQuery
Q:

How to Detect Change in a Text Input Box in jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  316 
Very Easy
0

How to Detect Change in a Text Input Box in jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the input Event

You can bind the input event to an input text box using on() method to detect any change in it.

The following example will display the entered value when you type something inside the input field.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Detect Change in Input Field</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#myInput").on("input", function(){
        // Print entered value in a div box
        $("#result").text($(this).val());
    });
});
</script>
</head>
<body>
    <p><input type="text" placeholder="Type something..." id="myInput"></p>
    <div id="result"></div>
</body>
</html>

Note that the input event fires on keyboard input, mouse drag, autofill and even copy-paste. But, it will not fire if you paste the same string or select and retype the same character, etc. inside the input.

Also, if you use the change event here it will not work as expected, since in case of text inputs the change event fires only when the element loses focus (i.e. onblur). Try the above example by replacing the string "input" with "change" (line no-8), and see how it works.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now