Learning IE8 - DOM Element Interfaces

by Brian Blakely

HTML

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" />

CSS

* {
    font-family: sans-serif;
    font-weight: bold;
}

input {
    width: 90%;
}

JavaScript

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'));
    });
}