javascript - How can I intercept reading the value of a text input? -

i'm working on greasemonkey / tampermonkey scripts various third party websites. (adding unicode normalization of vietnamese text input combining characters precomposed characters websites expect.)

on simple sites i've been able find events trap, submit, , process content of text input before site script deals it.

but on ajaxy sites might things testing input on each keypress or on timer. (i don't want change text normalization while typing because messes semantics of backspacing change tone marks).

is there way can trap each time site's script tries text in input element dom? maybe prototype, i've never used before, or not since it's dealing dom / host objects, etc?

the site i'm working on seems use jquery .val() text value of text input though. i'm guessing there must @ least esoteric way intercept jquery, know options intercepting @ lowest level too, if possible.

you can change page javascript sees² overriding <input>'s value-property's getter. note this 1 override changes jquery , other libraries see:

object.defineproperty (htmlinputelement.prototype, "value", {     get: function () {         return "xxx";         //return this.value;  //-- warning! causes infinite recursion.     } } ); 

the snippet, below, shows more practical example (firefox only. don't think there's workable way in chrome without serious complications -- see referenced bug(s), below.)

this example reports input's value until press "spoof" button. press "list" button see javascript thinks input's value is.:

window.fakeinput = false;    $(document).ready (jquerymain);    function listvalue (preamble) {      $("#output").append ('<li>' + preamble + $("#inptarg").val() + '</li>');  }    function jquerymain () {      //-- works on firefox not chrome!      var oldinpvaldescriptor = object.getownpropertydescriptor (htmlinputelement.prototype, "value");      if (oldinpvaldescriptor == null) {          // see chrome issue 43394 , many related.          alert ('this browser not support overriding value property');          return;      }      object.defineproperty (htmlinputelement.prototype, "value", {          get: function () {              if (window.fakeinput && this.id == "inptarg") {                  console.log ("spoofing...");                  return document.getelementbyid ("inpspoof").value;              }                return oldinpvaldescriptor.get.call (this);          }      } );        $("#btnprint").click ( function () {          listvalue ('');      } );        $("#btnhijack").click ( function () {          window.fakeinput    = ! window.fakeinput;          var onoffstr        = window.fakeinput ? "on" : "off";            if (window.fakeinput)              $("#btnhijack").text ('restore input');          else              $("#btnhijack").text ('hijack input');            listvalue ('hijack ' + onoffstr + '. value = ');      } );  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <p>      <label>target value:<input type="text" value="i'm not safe!" id="inptarg"></label> <br>      <label>spoof value:<input type="text" value="i'm fine. ;)" id="inpspoof"></label>  </p>  <p>      <button id="btnhijack">hijack input</button> <br>      <button id="btnprint">list value</button> <br>  </p>  <ol id="output"></ol>

warnings:

1. this smells "x y" problem. answering question asked, kind of approach not best way solve real-life problem.
2. this not override sent server on html form submit. targeted server see unspoofed value.
3. in greasemonkey/tampermonkey script, the override code must operate in page's scope. is, use @grant none or inject code.
4. this currently not work in chrome! see issue 43394 , many related bugs.