dyNamicEdit

by JonNorman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>
<div class="c1">
<input class="dynamicEdit" type="text" value="The Value" /><input type="button" class="toggleDisabled"/></div>
<div class="c2">
<input class="dynamicEdit" type="text" value="Next Value" disabled /><input type="button" class="toggleDisabled"/>
<br />
<textarea class="dynamicEdit">some value here</textarea><input type="button" class="toggleDisabled"/>
</div>

CSS

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}
div.dynamicEdit{color:red}
div.dynamicEdit.disabled{color:black}
.c2 div.dynamicEdit{color:blue}
.c2 div.dynamicEdit.disabled{color:grey}

JavaScript

(function ($) {
    $.fn.anyChange = function (cb) {
        return this.each(function () {
            if (typeof cb == 'function')
            {
                new AnyChange(this, cb);
            }
        });
    }

    function AnyChange(inputElement, callback) {
        var eventsRemoved  = false;
        if (inputElement.addEventListener) {
            inputElement.addEventListener("input", oninput, false);  // all browsers except IE before version 9
            inputElement.addEventListener("textInput", textInput, false);  // Google Chrome and Safari
            inputElement.addEventListener("textinput", textinput, false);  // Internet Explorer from version 9
        }
        else {
            if (inputElement.attachEvent) {
                inputElement.attachEvent("onpropertychange", propertyChangeEvent);   // Internet Explorer and Opera
            }
        }

        function oninput(event) {
            if (eventsRemoved===false) {
                inputElement.removeEventListener("textInput", textInput, false);   // Google Chrome and Safari
                inputElement.removeEventListener("textinput", textinput, false);   // Internet Explorer from version 9
                eventsRemoved = true;
            }

            callback.call(inputElement, event.target.value);
        }

        function textInput(event) {
            if (eventsRemoved===false) {
                inputElement.addEventListener("input", oninput, false);  // all browsers except IE before version 9
                inputElement.addEventListener("textinput", textinput, false);  // Internet Explorer from version 9
                eventsRemoved = true;
            }

            callback.call(inputElement, event.data);
        }

        function textinput(event) {
            if (eventsRemoved===false) {
                inputElement.addEventListener("input", oninput, false);  // all browsers except IE before version 9
                inputElement.addEventListener("textInput",...