在禁用的文本区域上无法使用.click()方法

Question

我正在使用jQuery。我有一个禁用的文本框：<textarea id="textarea" disabled="disabled"></textarea>。 我想使用户点击文本框时执行某些操作，例如弹出警告框。 因此，我使用$('#textarea').click(function() { alert('Test'); });。

然而，当文本框被禁用时，这只适用于未被禁用的文本框。那么，我该如何使单击事件在文本框被禁用时也触发呢？

- Gary

---

您可以将文本设置为 "" 而不是禁用它。 - Pabuc

可能是 https://dev59.com/9XA75IYBdhLWcg3wy8Xr 的重复问题。 - Oliver Tappin

Answer 1

为什么不使用readonly而不是disabled="disabled"，readonly与disabled几乎相同，并且单击事件仍然有效。

- mgraph

---

真的，您甚至可以样式化只读文本区域，使其看起来像被禁用一样。 +1 - Shawn31313

Answer 2

不要禁用它，您可以尝试使用CSS模拟禁用行为，并继续从中接收鼠标事件。

或者参考此答案（已禁用的输入框上的事件），其中Andy E展示了如何在禁用输入框时放置一个不可见元素（覆盖层）来接收这些鼠标事件。

他在单击输入框时删除覆盖层并启用输入框，但您可以根据需要更改其行为。

- Charlie Rudenstål

Answer 3

禁用的元素不会触发鼠标事件。大多数浏览器会将源自禁用元素的事件传播到DOM树上，因此可以在容器元素上放置事件处理程序。然而，Firefox不表现出这种行为，当您单击禁用元素时它什么也不做。

您可以尝试以下操作：

$(document).on('click', function(e) { 
    if (e.target.id === 'textarea') alert('works');
});​​​​

FIDDLE

但它可能不跨浏览器！

另一种可能更好的方法是在禁用的元素上面放置另一个元素，并在该元素上捕获事件，例如：

var t = $("#textarea"),
    over = $('<div</div>');
    over.css({
        position: "absolute",
        top: t.position().top,
        left: t.position().left,
        width: t.outerWidth(),
        height: t.outerHeight(),
        zIndex: 1000,
        backgroundColor: "#fff",
        opacity: 0
    });

t.after(over);

$(over).on('click', function() { 
    alert('works');
});​

FIDDLE

- adeneo

---

非常好的简单解决方案。 - Shawn31313

你需要在CSS中为textarea指定top和left的明确值，以便t.css("left"|"top")按预期工作。尝试使用.offset()或将left和top设置为0px，并将position: relative应用于textarea的容器。 - Charlie Rudenstål

@CharlieRudenstål - 几乎任何事情都有解决方法，只是我不想再花更多时间在上面了。我编辑了我的答案，应该可以在所有浏览器和大多数样式中使用。 - adeneo

啊，我的意图并不是贬低你的回答。更多的是给OP一个提示。我实际上要点赞这个解决方案。 - Charlie Rudenstål

Answer 4

禁用的元素不会触发点击事件，这是它们被禁用的一部分。

- Niet the Dark Absol

Answer 5

您不能从禁用的元素中触发点击事件，但是您可以设置值，例如：

http://jsfiddle.net/j6tdn/28/

- defau1t