Question

I need to create a form element

<input disabled type=”text” value=”Shui Mu Tsinghua” />

which is disabled by default. It enables when onmouseover occures.

onmouseover=”this.disabled=false;”

And is disabled by onmouseout

onmouseout=”this.disabled=true;”

---

What I need is to check the following.
If the <input> is focused then it shouldn’t be disabled.

And if the form element loses focus it disables.

Please help me to complete the events.

<input disabled type=”text” value=”Shui Mu Tsinghua” onmouseover=”this.disabled=false;” onfocus=”???” onblur=”???” onmouseout=”if(???){this.disabled=true;}” />

Answer 1

This won’t work, as onmouseover does not fire on disabled inputs, in most browsers. (Opera is an exception, and IE usually doesn’t, except when you trick it with a drag operation.)

In any case it sounds like a pretty weird and user-unfriendly trick to me. Why do you want it disabled? If it becomes non-disabled when you try to interact with it there doesn’t seem to be any point to it (but plenty of accessibility downside).

If it’s just a styling thing, then use styles:

<style type="text/css">
    .weirdinput { color: silver; }
    .weirdinput:hover, .weirdinput:focus { color: black; }
</style>

<input class="weirdinput" value="smth" />

However, IE<8 doesn’t support :focus, and IE<7 doesn’t support :hover on non-links, so if you need it to work on that you would have to add some scripting, eg. something like:

<style type="text/css">
    .weirdinput { color: silver; }
    .weirdinput:hover, .weirdinput:focus, .weirdhover, .weirdfocus { color: black; }
</style>

<input class="weirdinput" value="smth" />

<!--[if lt IE 8]><script type="text/javascript">(function() {

    // Fix focus/hover for IE on all inputs with class 'weirdinput'
    //
    var inputs= document.getElementsByTagName('input');
    for (var i= 0; i<inputs.length; i++) {
        var input= inputs[i];
        if (input.className.indexOf('weirdinput')!==-1) {
            input.onmouseover= mouseover;
            input.onmouseout= mouseout;
            input.onfocus= focus;
            input.onblur= blur;
        }
    }

    function mouseover() {
        this.className+= ' weirdhover';
    }
    function mouseout() {
        this.className= this.className.replace(' weirdhover', '');
    }
    function focus() {
        this.className+= ' weirdfocus';
    }
    function blur() {
        this.className= this.className.replace(' weirdfocus', '');
    }

})();</script><![endif]-->