Inputs extended with .duck() <br /> <input id="duck-1" value="change this text" /> <br /> <input id="duck-2" value="change this text" /> <br /> <br /> Inputs Extended Cautiously with .myDuck() <br /> <input id="myduck-1" value="change this text" /> <br /> <input id="myduck-2" value="change this text" />
* { font-family: sans-serif; font-weight: bold; } input { width: 90%; }
HTMLInputElement.prototype.duck = function() { if(this.value) { this.value = this.value.replace(' like a duck!', ''); this.value += ' like a duck!'; } }; function duckChange() { this.duck(); } if(window.addEventListener) { document.getElementById('duck-1').addEventListener('change', duckChange, false); document.getElementById('duck-2').addEventListener('change', duckChange, false); } else { document.getElementById('duck-1').attachEvent('onchange', function() { duckChange.call(document.getElementById('duck-1')); }); document.getElementById('duck-2').attachEvent('onchange', function() { duckChange.call(document.getElementById('duck-2')); }); } /* CAUTIOUS VERSION */ var duckProp = HTMLInputElement.duck || HTMLInputElement.prototype.duck ? 'myDuck' : 'duck'; HTMLInputElement.prototype[duckProp] = function() { if(this.value) { this.value = this.value.replace(' like a duck!', ''); this.value += ' like a myduck!'; } }; function myDuckChange() { this[duckProp](); } if(window.addEventListener) { document.getElementById('myduck-1').addEventListener('change', myDuckChange, false); document.getElementById('myduck-2').addEventListener('change', myDuckChange, false); } else { document.getElementById('myduck-1').attachEvent('onchange', function() { myDuckChange.call(document.getElementById('myduck-1')); }); document.getElementById('myduck-2').attachEvent('onchange', function() { myDuckChange.call(document.getElementById('myduck-2')); }); }