Menu
We can use jquery to monitor the html input value change , but I am confusing if the input value changed by javascript can we monitor it ? I can not rewrite other person code so I can not add the focus and blur to monitor the value changing . I have to say it again the input value change by JavaScript，not the keyboard or the mouse.
I have tried it with jquery but I got nothing ,here is the code .
<div style="display:none;" canshow="false"><input
name="extendDataFormInfo.value(fd_37157d8be9876e)" value="GT-2013-FT-
SZ·G-007-3" type="hidden"></div>
$("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").bind('input
porpertychange',function(){
console.log('666')
});
I write this html for this question
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="display:none;">
<input name="extendDataFormInfo.value(fd_37157d8be9876e)"
value="Initial value" type="hidden">
</div>
<a href="javascript:void(0)" onclick="change()">change_input_value</a>
</body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
function change () {// I suppose this is the function and it can not be
rewrited
$("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").val("changed
value")
}
//now show me how to monitor the input value change , you can not alter the change function
</script>
</html>
I want the console can show 666 ,actually I need to do something in the bind function . And there are more than 10 input elements ,but I only need to monitor one input element . I have to monitor the input value change so that I can do something after it change , do you know what I mean ? Can you give me some advice ?
815
asked Oct 18 '25 12:10
This is a hack, but if you can't alter the other code, one option is to put a getter and setter on the input itself, so that the other code's input.value = ... and $(input).val(..) go through your custom function (rather than invoking the getters and setters of HTMLInputElement.prototype):
const input = document.querySelector('input');
// need to save the native getter and setter methods, so they can be invoked later
const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(input, 'value', {
get() {
return get.call(this);
},
set(newVal) {
set.call(this, newVal);
console.log('New value set by JS detected: ', newVal);
// insert desired functionality here
return newVal;
}
});
input.value = 3;
$('input').val(5);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input>Another snippet, using your code:
const input = document.querySelector('input');
// need to save the native getter and setter methods, so they can be invoked later
const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(input, 'value', {
get() {
return get.call(this);
},
set(newVal) {
set.call(this, newVal);
console.log('New value set by JS detected: ', newVal);
// insert desired functionality here
return newVal;
}
});
function change() { // I suppose this is the function and it can not be rewrited
$("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").val("changed value ")
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display:none;">
<input name="extendDataFormInfo.value(fd_37157d8be9876e)" value="Initial value" type="hidden">
</div>
<a href="javascript:void(0)" onclick="change()">change_input_value</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
