2

我们可以使用jquery来监控html输入值的变化，但是我很困惑如果javascript改变了输入值我们可以监控吗？我不能重写其他人的代码，所以我不能添加focusandblur来监视值的变化。我不得不再说一遍，输入值是由 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多个输入元素，但我只需要监控一个输入元素。我必须监控输入值的变化，以便在它改变后我可以做一些事情，你知道我的意思吗？你能给我一些建议吗？

4

2 回答 2

1

这是一个 hack，但是如果您不能更改其他代码，一个选择是在input自身上放置一个 getter 和 setter，以便其他代码的input.value = ...并$(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 ")
}
<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>

于 2019-02-19T02:58:52.540 回答
0

您可以绑定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')
 });
于 2019-02-19T02:51:02.463 回答