Javascript - Text Input Attributes

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

What you could do is;

1. on focus set a variable to true;
2. on blur set the variable to false; and disabled true
3. onmouseover set disabled to false if it is on true
4. onmouseout set disabled ONLY IF variable is false; (so not focussed)

Answer 2

I think you're going to have a lot of trouble getting this behavior, because a disabled field won't receive the mouseover (or mouseenter, if your browser supports it) event. I even tried capturing the event on an element underneath it, but the disabled field eats it.

Answer 3

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]-->

Answer 4

disabled fields are not submitted, are not in the key tabbing node list, and do not listen to or pass on events. You disable an input so that the user cannot change its value.

No field can be changed without first getting the focus.

you can only change the disabled attribute through a script, which would come from an event somewhere else on the page.

But without a name, as in your example, the field's value will not be submitted with its form in any event, so how can it matter that the field is disabled or not?

If your intent is to disable the field if javascript is not enabled, why not just hide it with css and show it with a scripted style?