JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="myInput" />
<input type="text" id="someOtherInput" />
<div id="messages"></div>
JavaScript
(function () {
var __val = $.fn.val;
$.fn.val = function (value) {
if (this[0] && (this[0].$val_get || this[0].$val_set)) {
if (arguments.length === 0) return this[0].$val_get();
else return this[0].$val_set(value) || this;
}
return __val.apply(this, arguments);
};
})();
//--------------------------------------------------------
$('#myInput')[0].$val_get = function () {
$('#messages')[0].innerHTML += 'Got value from myInput!<br/>';
return this.value;
};
$('#myInput')[0].$val_set = function (value) {
$('#messages')[0].innerHTML += 'Set value to myInput!<br/>';
this.value = value;
}
//----
//Uses the overrided version
$('#myInput').val('Hello!');
$('#myInput').val();
//Uses the good old original function
$('#someOtherInput').val('Hello!');
$('#someOtherInput').val();