避免在 Firefox 中单击只读文本框答案

【问题标题】：Avoid readOnly textbox being clicked in Firefox避免在 Firefox 中单击只读文本框
【发布时间】：2012-06-09 06:23:23
【问题描述】：

如何避免在Firefox中点击只读文本框？

在 Firefox 中，可以点击带有 readOnly 属性的文本框，而其他浏览器则不能。它给了用户一个可以写文本框的意图..

在Firefox中如何避免？

注意：

我不想禁用该字段..

【问题讨论】：

stackoverflow.com/questions/7917592/…
写javascript有限制吗？如果没有，你可以用js轻松完成。
@Behnam Esmaili：我们可以在 js 中做什么？

标签： html firefox browser click

【解决方案1】：

使用 CSS

[readonly]{
    cursor: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

演示：http://jsfiddle.net/rR6dk/2/

【讨论】：

它在 fire Fox 中不起作用，我可以点击文本框元素。如果您在 Google chorme 中看到它可以完美运行。

【解决方案2】：

您可以使用 javascript 将焦点从输入中移开。

$("input").focus(function(){
       $(this).blur();
});

并使用 css 为您的输入设置样式，以便向用户提供输入已被禁用的意图。

编辑：

检查这个fiddle

【讨论】：

我问他能不能用js。
是的，这是所有浏览器中最好的 Benham

【解决方案3】：

您只需添加此 CSS。仅适用于火狐：

[readonly]{
    cursor: default;
    -moz-user-select: none;
    user-select: none;
}

有效！

【讨论】：

即使在 firefox 中也无法正常工作，我可以点击文本框元素。如果您在 Google chorme 中看到它可以完美运行。

【解决方案4】：

只需禁用文本框。

<input type='text' disabled='disabled' />

【讨论】：

@Jusnit - disabled 有什么你不想要的？因为如果您希望该字段不可点击，请禁用它。如果问题在于它的外观，您可以设置禁用字段的样式，使其看起来不会被禁用。
@Spudley：我会解释一下，我已经在 jquery 中基于ui combobox 创建了自定义组合框。这里在禁用字段、焦点、模糊等方面存在一些问题。不能按预期工作，而 readonly 工作得很好......
让我明白：你想要一个只读（UN-chanchable）和 UN-clickable 的文本框吗？如果你这样做，禁用并重新着色文本框禁用类似于只读，但它有不同的颜色