Javascript preventDefault在焦点事件上不起作用_Javascript_Jquery

Javascript preventDefault在焦点事件上不起作用

javascript jquery

Javascript preventDefault在焦点事件上不起作用,javascript,jquery,Javascript,Jquery,我试图设计一个表单，如果它有一个特定的类，用户应该不能与任何输入交互。出于各种原因，我希望避免使用“disabled”属性。我试图阻止焦点事件的默认设置，但它不起作用。我在Firefox、Chrome和Android的最新版本中对此进行了测试。我尝试了各种事件组合，例如“单击更改触摸启动焦点聚焦”。我试着在处理程序中输入“return false；”。有人知道为什么会发生这种情况，以及如何使其发挥作用吗 <!DOCTYPE html> <html><head>

我试图设计一个表单，如果它有一个特定的类，用户应该不能与任何输入交互。出于各种原因，我希望避免使用“disabled”属性。我试图阻止焦点事件的默认设置，但它不起作用。我在Firefox、Chrome和Android的最新版本中对此进行了测试。我尝试了各种事件组合，例如“单击更改触摸启动焦点聚焦”。我试着在处理程序中输入“return false；”。有人知道为什么会发生这种情况，以及如何使其发挥作用吗

<!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>

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

您可以使用

this.blur();

…相反。

对于文本字段，最好将其设置为只读。这仍然允许制表符和复制，但不允许修改

<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">

如果您使用的对象类型与文本字段不同，请更具体地说明对象类型。在使用与web页面预期功能相冲突的脚本之前，您应该使用支持预期行为的HTML属性。如果您不希望用户能够与数据交互，那么也可以使用usereditable标记以外的其他标记来显示数据（如div）

您可以在此处看到readonly和tabIndex字段的示例：

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

我对你的答案投赞成票，因为它很有帮助。然而，它也有一些小的美学问题。在iPhone上，如果我点击一个输入，屏幕上的键盘会出现几秒钟。这并不可怕，但有点让人分心。在一些安卓设备上，如果我在密码输入上尝试，它有时看起来像是聚焦的，但不允许我键入任何内容。在我的Droid2上，它有一个物理键盘，按键会显示我键入的字符，只需几秒钟，然后再切换回来。我希望有更好的解决方案，但如果没有更好的解决方案，我可能会接受。不幸的是，焦点活动无法取消。你能解释一下为什么你不喜欢使用disabled属性吗？我试图避免使用disabled属性，因为它可能很麻烦。当我显示对话框时，我必须禁用所有输入。当对话框隐藏时，必须将输入的禁用属性重置为其原始值（因为某些输入可能因其他原因被禁用）。因此，我需要一种方法来记住禁用属性的值。这是我可以做的，但可能需要更多的代码。我想知道是否有一种更简单、更优雅的方法。我不确定这是否是您的选择，但最简单的方法应该是隐藏完整的表单。无法聚焦隐藏元素。谢谢。我没有想到tab键。readonly属性不是一个选项，因为我试图阻止用户与表单交互。TabEn索引是我可以考虑的。实际上，TabDe饰件属性本身不是一个选项。用户仍然可以通过触摸来选择输入。如果你真的想阻止所有的交互，我在上面的答案中添加了一个选项。readonly属性防止所有项目的更改。为什么这是不可取的，也是您问题解决方案的一部分？我正在尝试实现一个模式对话框，它可以防止对话框中的元素被聚焦。然后，标准的方法是在整个页面上放置一个透明的gif图像（您可以缩放1x1图像以覆盖页面），然后将对话框放在上面。如果你在问题中这样说，我们可以更快地解决这个问题。

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