how to monitor the HTML input value changed by javascript

Question

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 ?

console.log - . not ,.

Traveling Tech Guy
– Traveling Tech Guy

2019-02-19 02:50:46 +00:00
Commented Feb 19, 2019 at 2:50 — Traveling Tech Guy
– Traveling Tech Guy, Commented Feb 19, 2019 at 2:50
fixed thank you

qihuan wu
– qihuan wu

2019-02-19 03:15:19 +00:00
Commented Feb 19, 2019 at 3:15 — qihuan wu
– qihuan wu, Commented Feb 19, 2019 at 3:15

CertainPerformance · Accepted Answer · 2019-02-19 06:45:55Z

3

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>

edited Feb 19, 2019 at 6:45

answered Feb 19, 2019 at 2:58

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

qihuan wu Over a year ago

I completed this question for more detail just now . Can you show me again ?

CertainPerformance Over a year ago

No changes to the code I posted originally are necessary - see edit for a live snippet

qihuan wu Over a year ago

Thank you very much , I change document.querySelector('input') to my input selector , then problem solved

qihuan wu Over a year ago

I find it can use in Chrome but it does not suit IE , what should I do now ? I want it can use in IE and Chrome .

qihuan wu Over a year ago

I transpiled it just now , here is the image . And I use it ,but not suit in IE 9 img.shownmmp.top/babel.png

|

Collectives™ on Stack Overflow

how to monitor the HTML input value changed by javascript

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related