Detect input value change with JavaScript

Question

This question has been made in several places but I have not found a great answer. I want to detect an input (text) value change. The value is changed via pure JavaScript with no frameworks (I can't access this) so the solution can't be modify the val() function of jQuery to trigger an event. Events won't work as you know. The only solution that actually works is

setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);

but I want to find something different without using a setInterval

You can use javascript event for input. change, keyup, keydown, keypress — Radonirina Maminiaina, Mar 25 '18 at 17:33
@RadonirinaMaminiaina: a programmatic value-change ("*the value is changed via...[JavaScript]...*") doesn't fire those events. — David Thomas, Mar 25 '18 at 17:35
Please clarify. Input value of what? A text field? Do check out existing answers. https://stackoverflow.com/questions/1481152/how-to-detect-a-textboxs-content-has-changed — SamwellTarly, Mar 25 '18 at 17:35
https://stackoverflow.com/questions/4200358/jquery-detect-programatic-change-to-field — Radonirina Maminiaina, Mar 25 '18 at 17:37
@SamwellTarly yeah I checked all those, and as I said in the post, programmatic value-change via JS wont trigger any event. — Raidel, Mar 25 '18 at 17:38
@RadonirinaMaminiaina programmatic value-change via JS wont trigger any event and as I said I can't access the code responsible for updating the filed — Raidel, Mar 25 '18 at 17:39
If the value of your input is changed, the change event will triggered. Have you try it? — Radonirina Maminiaina, Mar 25 '18 at 17:42
@RadonirinaMaminiaina if the value is changed programatically it wont trigger any events, so `Change` event, or `Input` event wont work — Raidel, Mar 25 '18 at 17:49
Does this answer your question? [How do you listen / detect changes to an input value - when the input value is changed via JavaScript?](https://stackoverflow.com/questions/55033836/how-do-you-listen-detect-changes-to-an-input-value-when-the-input-value-is-c) — Heretic Monkey, Jul 05 '23 at 14:36

score 0 · Answer 1 · answered Mar 25 '18 at 17:48

0

As David Thomas says, changing the value via javascript doesn't fire the onchange event... Therefore your javascript function needs to call the element.onchange() event once it has completed.

answered Mar 25 '18 at 17:48

Tony Duffill

277
1
5

and that is the issue, I don't have access to the js function changing the value – Raidel Mar 25 '18 at 17:50

score -5 · Answer 2 · answered Mar 27 '18 at 17:24

You can write your own JavaScript function to listen to onChange() event using jQuery and then monitor if the value has changed or not.

The Code using JavaScript is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" id="checkThis" placeholder="Enter Something Here...">

<script type="text/javascript">
      $("#checkThis").on("change", function() {
        // Press `F12` on Chrome or `Ctrl+Shift+S` on Firefox to view output in browser console
        console.log($(this).val());
      });
</script>

Detect input value change with JavaScript

2 Answers2