HTML & Javascript - 如何模拟禁用的输入（隐藏插入符号）？答案

【问题标题】：HTML & Javascript - how to emulate disabled input (hide caret)?HTML & Javascript - 如何模拟禁用的输入（隐藏插入符号）？
【发布时间】：2012-12-21 09:00:20
【问题描述】：

我需要的是一个禁用的输入，它会触发事件。但由于 Firefox 不支持，我想以某种方式模拟它。

这基本上意味着不允许编辑并隐藏插入符号。我不在乎外表。

我见过这个 CSS 被使用：user-select: none; 但这不是我想要的 - 1) 用户仍然可以编辑 2) 我希望它是可选择的。

我不希望用 a 覆盖真正禁用的输入并捕获它的事件 - 它的可移植性不好。

相关：Event on a disabled input

【问题讨论】：

所以你想禁止编辑，但它应该是可编辑的......
我认为您误解了用户选择段落。重新措辞。
哦，我明白了 - 你的意思是，这些是仅使用 user-select 设置的问题。我现在明白了！对不起。

标签： javascript html emulation disabled-input

【解决方案1】：

您基本上可以取消输入上的每个 keydown 事件。但是，这仍然会显示 carret：

<input type="text" id="disabled_input" />

jQuery:

$('disabled_input').keydown(function (event) {
    event.preventDefault();
    event.stopPropagation();
    // or simply return false;
});

Javascript：

document.getElementById('disabled_input').onkeydown = function (event) {
    event.preventDefault();
    event.stopPropagation();
    // or simply return false;
};

【讨论】：

不确定用户是否在使用 jQuery……他没有标记或提及它。
@jwatts1980 用纯javascript更新
啊，preventDefault()。会尝试。谢谢。

【解决方案2】：

为什么不将它包装在另一个元素中并将事件处理程序放置在该元素上？

例如

<div class="disabledwrapper">
    <input type="text" disabled="disabled" name="test" value="test" />
</div>

【讨论】：

因为 Firefox 不发送点击事件。它们根本没有被解雇，在 DOM 中也没有。我需要点击事件来例如导航到输入中包含的 URL。