禁用输入框上的悬停效果无法正常工作？

Question

我有一个禁用的输入框，当鼠标悬停在其上时，我想弹出一个窗口，显示该字段将自动填充。

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

可以有人建议我如何实现这一点。

- sushil bharwani

---

请查看http://bugs.jquery.com/ticket/11382。 - Arun P Johny

请查看 https://dev59.com/OWox5IYBdhLWcg3wFAY1 获取解决方案。 - Sergey Telshevsky

请查看此解决方案：https://dev59.com/HWYr5IYBdhLWcg3w6OGd#22867505 - Alex Strizhak

Answer 1

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

这将告诉您如何做到这一点

但是，您还可以将字段保持启用状态，在悬停时禁用它并显示警报消息。例如：

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

我已经创建了一个演示页面，你可以在这里查看。

- Vikas Arora

---

这个解决方案存在两个问题：a) 它只能使用一次，b) 用户可以使用 TAB 键修改字段内容。 - tpolyak

在这种情况下，您可以将onfocus事件与hover绑定。 - Vikas Arora

它仍然无法解决TAB键的问题（没有发生悬停）。我认为更好的方法是使用$('input').focus(...)来显示相同的警报并禁用该字段。 - tpolyak

可以，那样会更好。或者你可以尝试使用焦点事件的第一种方法。 - Vikas Arora

Answer 2

你可以将输入框放在一个div中，在div上悬停时弹出警报。我试过了，它完美地工作。

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

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

- Abhishek Punj

Answer 3

这是jQuery故意做的。请参阅jQuery的此错误

基于#6911，jQuery.event.dispatch有意进行了这项操作，以规范跨浏览器行为。但是，对于某些事件，我们似乎不应该这样做。我们可以轻松地恢复更改，但这将导致其他错误报告。

- Arun P Johny

Answer 4

我通过添加包装器并在包装器上添加悬停效果来解决按钮问题，然后在禁用时将按钮的 z-index 设置为图层下方。虽然有点麻烦，但似乎效果还不错： 我已经测试过了，这个解决方案对于其他禁用的表单元素（如输入框/文本框）也适用。

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

http://jsfiddle.net/M6xxk/

- Bhuvan Arora

Answer 5

尝试这个 //HTML

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

});

代码示例

- luckyamit