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，实际上我需要在bind函数中做一些事情。并且有十多个输入元素，但是我只需要监视一个输入元素。我必须监视输入值的更改，以便更改后可以执行某些操作，您知道我的意思吗？你能给我一些建议吗？

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本身上放置一个吸气剂和设置器，以便另一个代码的input.value = ...和{{ 1}}进行自定义功能（而不是调用$(input).val(..)的getter和setter）：

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>

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 ")
}

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

2 个答案: