Question

我正在尝试设计一个表单，如果它有某个类，则用户不应该能够与任何输入进行交互。出于各种原因，我想避免使用“禁用”属性。我试图阻止焦点事件的默认值，它不起作用。我在最新版本的Firefox，Chrome和Android中对此进行了测试。我尝试了各种事件组合，例如“点击更改touchstart focus focusin”。我试过把“返回假”;在处理程序中。有谁知道为什么会这样，以及如何让它发挥作用？

<!DOCTYPE html>
<html><head>
<title>input test</title>
</head>
<body>
<form class="disabled">
  <input type="text">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(".disabled :input").bind("focus", function(e) {
  e.preventDefault();
});
</script>
</body></html>

您可以在http://jsfiddle.net/54Xka/

查看示例

编辑：这将主要针对移动浏览器的网站。我打算在显示模式对话框时禁用输入。模态对话框使用我自己的代码实现。显示和隐藏div是非常简单的事情。

编辑2：这就是我现在所拥有的：

$(".disabled :input").live({
  focus: function() {
    $(this).blur();
  },
  change: function(e) {
    e.preventDefault();
  }
});

它有一些轻微的美学问题，但它有效。当我有更多时间时，我可以尝试使用透明gif的jfriend00的想法，或类似于jQuery UI对话框小部件的操作，或者实际上使用jQuery UI对话框小部件来实现对话框。

Answer 1

你可以使用

this.blur();

...来代替。

Answer 2

对于文本字段，最好的办法是将它们设置为只读。这仍然允许标签和复制，但不能修改。

<input type="text" readonly="readonly" value="Can't change me">

如果您还想停止标签，那么正常运行的网页支持页面上用于键盘访问的对象之间的键盘导航。这意味着任何只是试图阻止焦点的选项都会中断通过键盘导航网页的任何尝试。因此，最好通过告诉浏览器该对象不打算作为制表位来阻止项目之间的标签，并且当按下Tab键时它很乐意跳过它。您可以通过对象上的设置tabIndex为-1来执行此操作。键盘导航将永远不会停止在其上，但否则将按预期工作。

<input type="text" readonly="readonly" tabIndex="-1" value="Can't change me or tab to me">

如果您使用的是不同类型的对象而不是文本字段，那么请更具体地说明对象的类型。在使用混乱了网页预期功能的脚本之前，您应该追求支持预期行为的HTML属性。如果您不打算让用户能够与其进行交互，那么使用usereditable标签之外的其他内容来显示数据（如div）也是有意义的。

您可以在此处查看readonly和tabIndex字段的示例：http://jsfiddle.net/jfriend00/9wWkQ/

现在，听起来我们有移动规格。现在你说你甚至不希望他们能够选择文字。即使在不可编辑的普通div中也可以这样做。如果要阻止所有用户访问，甚至包括选择单个字段的文本，那么您将不得不求助于在表单区域的顶部放置一个空白的透明gif图像。这将阻止所有鼠标与字段的交互，并与readonly结合使用，tabIndex也应阻止所有键盘访问。

preventDefault对焦点事件不起作用

2 个答案: