Pure Javascript listen to input value change
This is what events are for.
HTMLInputElementObject.addEventListener('input', function (evt) {
something(this.value);
});
Event when input value is changed by JavaScript?
Based on @t-j-crowder and @maciej-swist answers, let's add this one, with ".apply" function that prevent infinite loop without redefining the object.
function customInputSetter(){
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
var originalSet = descriptor.set;
// define our own setter
descriptor.set = function(val) {
console.log("Value set", this, val);
originalSet.apply(this,arguments);
}
Object.defineProperty(HTMLInputElement.prototype, "value", descriptor);
}
Detect programmatic changes on input type text
If you're dealing with a modern browser, you can try with something like this:
var input = document.getElementById('test');
input._value = input.value;
Object.defineProperty(input, "value", {
get: function() {return this._value;},
set: function(v) {
// Do your stuff
this._value = v;
}
});
This solution is good if you actually don't expect any user input (i.e., hidden type input fields), because it's extremely destructive of the DOM basic functionality. Keep that in mind.
How do I detect when input value changes real-time in JavaScript?
Use the input
event instead, as the name suggests it would fire each time an input is made, see this example on how to use the event:
let inputElem = document.querySelector('input');
inputElem.addEventListener('input', () => { console.log(inputElem.value); // Log the new value after an input is made});
<input />
Detect changed input Values of an HTML input table
You could mark each row with a data- attribute and use it to check if it changes.
For example in a given row:
<tr id="tr1" data-foo-bar="original">
<td><input type="text" onchange="change();"></td>
</tr>
When a value inside this row is changed you trigger this function:
function change(){
document.getElementById("tr1").dataset.fooBar = "modified";
}
Then you can access this attribute with:
if (document.getElementById("tr1").dataset.fooBar == "original"){
// hasn't been changed
}
else
{
// it has changed
}
Related Topics
JavaScript Beforeunload Detect Refresh Versus Close
Html5 Drag & Drop Change Icon/Cursor While Dragging
Convert JavaScript-Generated Svg to a File
Converting Em to Px in JavaScript (And Getting Default Font Size)
Toggle Divs Without Using JavaScript
Accessing JavaScript Variable from Ruby
How to Get the Name of the Currently Running Function in JavaScript
Correct Path for Img on React.Js
Importing Lodash into Angular2 + Typescript Application
Why Does JavaScript Variable Declaration at Console Results in "Undefined" Being Printed
How to Listen/Detect Changes to an Input Value - When the Input Value Is Changed via JavaScript
How to Append Timestamp to the JavaScript File in <Script> Tag Url to Avoid Caching
How to Zoom a Background Image on a Div with Background-Size
Jquery .Animate() Stop Scrolling When User Scrolls Manually
Div Square, Width Size Based on 100% Height
What Blocks Ruby, Python to Get JavaScript V8 Speed
Why am I Seeing an "Origin Is Not Allowed by Access-Control-Allow-Origin" Error Here