悬停在禁用的输入字段上不起作用？答案

【问题标题】：Hover not working on disabled input field?悬停在禁用的输入字段上不起作用？
【发布时间】：2013-09-27 07:31:18
【问题描述】：

我在悬停时有一个禁用的输入字段，我想做一个弹出窗口，说明该字段将被自动填充。

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

这是我的 jQuery，它不起作用。

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

谁能建议我如何做到这一点。

【问题讨论】：

见bugs.jquery.com/ticket/11382
请参阅stackoverflow.com/questions/9450641/… 以获得解决方案
请看一下这个解决方案：stackoverflow.com/a/22867505/8287207

标签： jquery html

【解决方案1】：

它是由 jQuery 有意完成的。参见 jQuery 中的 this bug

这是基于 #6911 在 jQuery.event.dispatch 中有意完成的规范跨浏览器行为。然而这似乎是不可取的我们这样做，至少对于某些事件。我们可以很容易地恢复更改，但会导致其他错误报告。

【讨论】：

【解决方案2】：

鼠标事件不会在禁用字段上触发。您可以做的是在禁用字段前面放置一个元素，然后将鼠标事件放在该元素上。

This will tell you exactly how to do it

但是，您可以做的其他事情是保持该字段启用并在悬停时禁用它并显示警报消息。喜欢：

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

我创建了一个fiddle for it. You can check it out here。

【讨论】：

这个解决方案有两个问题：a) 它只工作一次，b) 用户可以使用 TAB 键修改字段内容
在这种情况下，您可以将 onfocus 事件与悬停绑定。
它仍然无法解决 TAB 键问题（没有发生悬停）。我认为更好的方法是使用 $('input').focus(...) 来显示相同的警报并禁用该字段。
是的，这样会更好。或者有焦点事件，你可以试试第一种方法。

【解决方案3】：

试试这个 //HTLM

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

//脚本

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

});

fiddle example

【讨论】：

【解决方案4】：

您可以将您的输入框包含在一个 div 中，并在 div 的 hove 上发出警报。我试过了，效果很好。

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

我希望这能解决你的问题。

【讨论】：

【解决方案5】：

我通过添加包装器并在包装器上添加悬停来解决按钮问题，然后在禁用时设置图层下方按钮的 z-index。有点痛苦，但似乎工作得很好：我对其进行了测试，该解决方案适用于所有其他禁用的表单元素，例如 input/textarea。

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

http://jsfiddle.net/M6xxk/

【讨论】：