How to detect If textbox content has changed using JavaScript ?
Last Updated :
23 Sep, 2024
Detecting if the content of a textbox has changed in JavaScript means identifying when a user modifies the text within an input field. This can be achieved using events like input, change, or keyup, which trigger JavaScript functions in response to content alterations.
There are some common approaches that are discussed below:
Approach 1: Using onchange event
The onchange event in JavaScript triggers when the textbox loses focus after its content is modified. It doesn't fire immediately while typing but waits until the user finishes editing and clicks elsewhere, making it useful for detecting finalized changes in input fields.
Example: In this example, the onchange event on a textbox. When the user modifies the text and clicks outside the textbox, a JavaScript function triggers an alert with the message "Changed".
html
<!DOCTYPE html>
<html>
<head>
<title>
Using onchange event
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Change the text of input text
and click outside of it to see.
</p>
<input id="input" name="input" onchange="GFG_Fun()" />
<br>
<br>
<script>
function GFG_Fun() {
alert('Changed');
}
</script>
</body>
</html>
Output:
Approach 2: Using onpropertychange event
The onpropertychange event in JavaScript is triggered when a property of an HTML element changes, specifically used in older versions of Internet Explorer (IE 8 and below). For textboxes, it detects changes in the value property, alerting when content is modified.
Example: In this example, we multiple events like onchange, onpropertychange, onkeyup, onpaste, and oninput on a textbox. Whenever the content changes, the JavaScript function triggers an alert displaying "Changed".
html
<!DOCTYPE html>
<html>
<head>
<title>
Using onpropertychange event
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Change the text of input text and
click outside of it to see.
</p>
<input id="input" name="input"
onchange
onpropertychange
onkeyuponpaste
oninput="GFG_Fun()" />
<br>
<br>
<script>
function GFG_Fun() {
alert('Changed');
}
</script>
</body>
</html>
Output:
Approach 3: Using addEventListener() Method
The addEventListener() method attaches an event handler to an HTML element without overwriting existing events. For detecting textbox changes, you can use it to listen for events like input, change, or keyup, ensuring the callback function executes when content changes.
Example: In this example, we use addEventListener() to listen for the input event on a textbox. When the content of the textbox changes, an alert is triggered displaying the message "Changed!".
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using addEventListener() method</title>
<style>
h1 {
text-align: center;
}
.abc {
display: flex;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<div class="abc">
<input id="gfg">
</div>
<script>
document.getElementById("gfg")
.addEventListener("input", (event) => alert("Changed!"));
</script>
</body>
</html>
Output:
Similar Reads
How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript ? In this article, we will detect copy-paste commands Ctrl+V, and Ctrl+C using JavaScript. To detect the combination of keys with "Ctrl", we use the ctrl property of the keydown event. ApproachEvent Listener: The script adds an keydown event listener to the document.Element Access: It accesses the HTM
2 min read
How to detect and change the content/style of a div using jQuery ? The changes to the html/text of a div can be detected using jQuery on() method. The on() is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. The on() method is the replacement of the bind(), live() and delegate() method from the jQuery version 1
2 min read
JavaScript - How to Change the Content of a <Textarea> ? Here are the various methods to change the content of a textarea using JavaScript.1. Using value PropertyThe value property is the most common method to change or retrieve the content of a <textarea>.HTML<textarea id="myTextarea">Initial content</textarea> <button onclick="chang
2 min read
How to detect when cancel is clicked on file input using JavaScript ? This article describes the method to handle a situation when the user tries to input a file and later fails to upload the file. It gives the status to the user that the file is not uploaded. This may be useful in situations when an important file needs to be submitted or the application requires the
3 min read
How to trigger HTML button after hitting enter button in textbox using JavaScript ? In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the k
4 min read
JQuery | Detect a textbox content is changed or not In order to detect the text content of input is changed or not, We are using the .on() method of JQuery. .on() This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements. Syntax: $(selector).on(event, childSel, data, fun, map)
2 min read