禁用输入框上的OnClick事件

Question

• 我需要在被禁用的<input>标签上添加一个onclick事件。
• 这里onclick事件不起作用。
• 有没有其他方法根据id在禁用的输入框中使用onclick事件？
• 我尝试了下面的代码。
• 第一个input可以工作，但我需要第二个input也能像第一个一样工作。（我只需要在input上调用函数Clicked）。

我的代码：

function Clicked(event)
{
  alert(event.id)
}
function ClickedDisabled(event)
{
  alert(event.ids)
}

<input type="text" id="ID" onclick="Clicked(this)" />
<input type="text" id="IDs" onclick="ClickedDisabled(this)" disabled />

- Hydrogen

---

可能是 禁用输入框上的事件 的重复问题。 - Alexander O'Mara

Answer 1

function Clicked(event) {
  alert(event.id)
}

function ClickedDisabled(event) {
  alert(event.id)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" id="ID" onclick="Clicked(this)" />
<span style="position:relative;">
<input type="text" id="IDs" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" id="IDs" onclick="ClickedDisabled(this)"></div>
  </span>

试一下这个，它可能会帮助你。

- priya786

Answer 2

放置

input[disabled] {pointer-events:none}

在你的CSS中添加pointer-events:none(防止某些浏览器完全丢弃禁用输入上的点击)，并捕获父元素上的点击。在我看来，这是一个更加清晰的解决方案，比在元素上放置透明覆盖层来捕获点击要好，并且根据情况可能比仅仅使用CSS“模拟”禁用状态更容易(因为这不会阻止输入被提交，并且还需要覆盖默认的浏览器“禁用”样式)。

如果您有多个这样的按钮，则需要为每个按钮设置唯一的父级，以便能够区分点击了哪个按钮，因为使用pointer-events:none时，点击目标是按钮的父级而不是按钮本身。(或者你可以测试点击坐标，我想...)

然而，如果您需要支持旧版浏览器，请检查哪些浏览器支持pointer-events：http://caniuse.com/#search=pointer-events

- Doin