How to Detect Change in a Text Input Box in jQuery

  274 views   6 months ago jQuery

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-1.12.4.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>

 

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles