如何监控由 javascript 更改的 HTML 输入值

Question

我们可以使用jquery来监控html输入值的变化，但是我很困惑如果输入值被javascript改变了我们可以监控吗？我不能重写其他人的代码，所以我不能添加 focus 和 blur 来监视值的变化。必须再说一遍，输入值的变化是JavaScript，不是键盘鼠标

我已经用 jquery 试过了，但我什么也没得到，这是代码。

 <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')
  });

这个问题我写html

<!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>

我希望控制台可以显示666，实际上我需要在绑定函数中做一些事情。而且有10多个输入元件，但我只需要监控一个输入元件。我必须监视输入值的变化，以便在它发生变化后我可以做一些事情，你知道我的意思吗？你能给我一些建议吗？

Answer 1

您可以绑定 change 事件。

 $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").bind('change', function() {
    console.log('666')
 });

或者简单地调用一个 change 方法。

 $("input[name='extendDataFormInfo.value(fd_37157d8be9876e)']").change(function() {
    console.log('666')
 });

Answer 2

这是一个 hack，但如果你不能改变其他代码，一个选择是在 input 本身上放置 getter 和 setter，这样其他代码的 input.value = ... 和 $(input).val(..) 通过您的自定义函数（而不是调用 HTMLInputElement.prototype 的 getter 和 setter）：

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>

另一个片段，使用您的代码：

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>

如何监控由 javascript 更改的 HTML 输入值

how to monitor the HTML input value changed by javascript

html

javascript

onchange