无法让.click（）在禁用的textarea上工作

I'm using jQuery. I have a disabled textarea: <textarea id="textarea" disabled="disabled"></textarea>. I want to make it so that when a user clicks on the textarea, it will do something, such as an alert box. So, I have $('#textarea').click(function() { alert('Test'); });.

我正在使用jQuery。我有一个禁用的textarea： </ textarea>。我想这样做，以便当用户点击textarea时，它会做一些事情，比如警告框。所以，我有$（'＃textarea'）。click（function（）{alert（'Test'）;}）;.</p>

However, this only works when the textarea is not disabled. So, how can I make the click event fire even when the textarea is disabled?

但是，这仅在未禁用textarea时有效。那么，即使禁用textarea，如何才能使click事件触发？

5 个解决方案

#1

Instead of disabling it, you could either try simulating the disabled behaviour with CSS and continue receiving mouse events from it.

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

Or see this answer Event on a disabled input where Andy E shows how you can place an invisible element (an overlay) on top of the input for receiving those mouse events when the input is disabled.

或者在禁用输入上查看此答案事件，其中Andy E显示如何在输入顶部放置一个不可见元素（覆盖），以便在禁用输入时接收这些鼠标事件。

He removes the overlay and enables the input when it is clicked, but you could change the behavior to anything you'd like.

他删除叠加层并在单击时启用输入，但您可以将行为更改为您想要的任何内容。

#2

instead of disabled="disabled" why not use readonly, readyonly is alomst same as disabled and the click event will works

而不是禁用=“禁用”为什么不使用只读，readyonly与禁用相同，click事件将起作用

#3

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.

禁用的元素不会触发鼠标事件。大多数浏览器会将源自禁用元素的事件传播到DOM树上，因此事件处理程序可以放在容器元素上。但是，Firefox不会出现此行为，当您单击禁用的元素时，它根本不执行任何操作。

You could do something like:

你可以这样做：

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

FIDDLE

小提琴

But it's probably not cross-browser!

但它可能不是跨浏览器！

Another, and possible better way to do it, is to place another element on top of the disabled one and catch events on that element, something like :

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

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

小提琴

#4

Disabled elements don't fire click events. That's part of them being disabled.

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

#5

You cant fire click event from disabled elements, though you can set the value e-g:

您无法从禁用的元素中触发click事件，但您可以设置值e-g：

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

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