Hover not working on disabled input field?

Question

I have a disabled input field on hover of which i want to do a popup which says this field will be automatically populated.

<input type="text" class="dcol" data-toggle="popover" data-content="Required Field with Numeric Input" disabled="disabled" style="background-color:#FFFF66" value="">

Here is my jQuery which is not working.

$('input:disabled').hover( 
    function(){
        alert("hello");
    },
    function(){ 
        alert("bye");
    }
 );

Can anyone suggest how I can achieve this.

See http://stackoverflow.com/questions/9450641/does-jquery-not-fire-hover-event-on-a-disabled-button for a solution — Sergey Telshevsky, Sep 22 '13 at 08:15
Please take a look for this solution:https://stackoverflow.com/a/22867505/8287207 — Alex Strizhak, Apr 22 '19 at 14:41

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

The mouse event will not get fired on the disabled field. What you can do is put an element in front of the disabled field and put your mouse event on that element.

This will tell you exactly how to do it

However, other thing you can do is keep the field enabled and on hover over, disable it and show the alert message. Like:

$('input').hover(function(){
  alert("hello");
   $(this).attr('disabled','disabled');        
});

I have created a fiddle for it. You can check it out here.

edited May 23 '17 at 12:33

Community

1
1

answered Sep 22 '13 at 08:23

Vikas Arora

1,666
2
17
38

3

There are two problems with this solution: a) It works only once, b) user is able to modify field contents using the TAB key – tpolyak Sep 22 '13 at 08:28
in that case you can bind onfocus event with hover. – Vikas Arora Sep 22 '13 at 08:36
It would still not solve the TAB key problem (no hover has happened). I think a better approach would be to use $('input').focus(...) to display the same alert and disable the field. – tpolyak Sep 22 '13 at 08:45
yes, that will better. Or with focus event, you can try the first method. – Vikas Arora Sep 22 '13 at 08:50

score 2 · Answer 2 · answered Sep 22 '13 at 08:15

It is done intentionally by jQuery. See this bug from jQuery

This was done intentionally in jQuery.event.dispatch based on #6911 to normalize a cross-browser behavior. However it seems inadvisable for us to do it, at least for some set of events. We can easily revert the change but it will cause other bug reports.

score 2 · Answer 3 · answered Sep 22 '13 at 08:43

You can enclose your input box within a div and raise the alert on hove of the div. I tried it out and it works just perfect.

<div id="hov"><input type="text" class="dcol" data-toggle="popover" data-content="Required Field with Numeric Input" disabled="disabled" style="background-color:#FFFF66" value=""></div>

$('#hov').hover(function(){
  alert("hello");      
});

I hope this solves your problem.

score 0 · Answer 4 · answered Jan 16 '19 at 06:05

I worked around the button issue by adding a wrapper, and adding hover on the wrapper, then setting z-index of the button underneath the layer when disabled. A bit of a pain, but seems to work fairly well: I tested it, this solution is working for every other disabled form elements like input/textarea.

<div class='wrapper-div' onmouseover='function()'>
<button disabled> Having Z-index: -1 </button>
</div>

http://jsfiddle.net/M6xxk/

score -1 · Answer 5 · answered Sep 22 '13 at 08:27

try this //HTLM

<input id="txt" type="text" class="dcol" data-toggle="popover" data-content="Required Field with Numeric Input"  style="background-color:#FFFF66" value="">

//SCRIPT

$("#txt").hover(function(){
alert("this field will be automatically populated!"); 
 $(this).attr('disabled','disabled');

});

fiddle example

Hover not working on disabled input field?

5 Answers5

Linked