preventDefault对焦点事件不起作用 [英] preventDefault does not work on focus event
问题描述
我正在尝试设计一个表单，如果它有某个类，则用户不应该能够与任何输入进行交互。出于各种原因，我想避免使用禁用属性。我试图阻止焦点事件的默认值，它不起作用。我在最新版本的Firefox，Chrome和Android中对此进行了测试。我尝试了各种事件组合，例如点击更改touchstart focus focusin。我试过把返回假;在处理程序中。有谁知道为什么会发生这种情况以及如何使它发挥作用？
I am trying to design a form such that if it has a certain class, the user should not be able to interact with any of the inputs. For various reasons, I would like to avoid using the "disabled" attribute. I am trying to prevent the default on the focus event and it is not working. I tested this in recent versions of Firefox, Chrome, and Android. I tried various combinations of events, such as "click change touchstart focus focusin". I tried puting "return false;" in the handler. Does anyone know why this is happening and how to make it work?
<!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非常简单。
This will be on a site intended mostly for mobile browsers. I am planning to disable the inputs when a modal dialog is showing. The modal dialog is implemented using my own code. It is something very simple that shows and hides a div.
编辑2：这就是我现在所拥有的：
EDIT 2: This is what I have now:
$(".disabled :input").live({
focus: function() {
$(this).blur();
},
change: function(e) {
e.preventDefault();
}
});
它有一些小的审美问题，但它有效。当我有更多时间时，我可以尝试使用透明gif的jfriend00的想法，或类似于jQuery UI对话框小部件的做法，或者实际上使用jQuery UI对话框小部件来实现对话框。
It has some minor aesthetic issues but it works. When I have more time, I may try jfriend00's idea with the transparent gif, or something similar to what the jQuery UI dialog widget does, or maybe actually using the jQuery UI dialog widget to implement the dialog.
推荐答案
对于文本字段，最好的办法是将它们设置为只读。这仍然允许标签和复制，但不允许修改。
For text fields, the best thing to do is to set them to read only. This still allows tabbing and copying, but not modification.
<input type="text" readonly="readonly" value="Can't change me">
如果你还想停止标签，那么一个功能正常的网页支持对象之间的键盘导航用于键盘访问的页面。这意味着任何只是试图阻止焦点的选项都会中断通过键盘导航网页的任何尝试。因此，最好通过告诉浏览器该对象不打算作为制表位来阻止项目之间的标签，并且当按下Tab键时它很乐意跳过它。您可以通过对象上的设置tabIndex为-1来执行此操作。键盘导航将永远不会停止在其上，但否则将按预期工作。
If you also want to stop tabbing, then a proper functioning web page supports keyboard navigation among the objects on the page intended for keyboard access. That means that any option that just simply tries to block the focus will interrupt any attempt to navigate the web page via keyboard. As such, it's best to block tabbing between items by telling the browser that this object is not intended as a tab stop and it will happily just skip over it when the tab key is pressed. You can do so by settings tabIndex to -1 on the object. Keyboard navigation will never stop on it then, but will otherwise work as intended.
<input type="text" readonly="readonly" tabIndex="-1" value="Can't change me or tab to me">
如果你使用的是不同类型的对象而不是文本字段，那么请更具体地说明什么类型对象在使用混乱了网页预期功能的脚本之前，您应该追求支持预期行为的HTML属性。如果你不打算让用户能够与它进行交互，那么使用usereditable标签以外的东西来显示数据（比如div）也是有意义的。
If you're using different types of objects than text fields, then please be more specific about what types of objects. You should pursue the HTML attributes that support your intended behavior before resorting to scripts that mess with the expected functioning of the web page. It may also make sense to use something other than a usereditable tag to just display data (like a div) too if you don't intend for the user to be able to interact with it.
您可以在此处查看readonly和tabIndex字段的示例： http://jsfiddle.net/jfriend00/ 9wWkQ /
You can see examples of readonly and tabIndex fields here: http://jsfiddle.net/jfriend00/9wWkQ/
现在，听起来我们已经有了移动规格。现在你说你甚至不希望他们能够选择文字。即使在不可编辑的普通div中也可以这样做。如果要阻止所有用户访问，甚至包括选择单个字段的文本，那么您将不得不求助于在表单区域的顶部放置一个空白的透明gif图像。这将阻止所有鼠标与字段的交互，并与readonly结合使用，tabIndex也应该阻止所有键盘访问。
Now, it sounds like we have moving specifications. Now you're saying you don't even want them to be able to select text. That can be done even in a plain div that isn't editable. If you want to block all user access including even selecting of the text of individual fields, then you will have to resort to something like putting a blank transparent gif image over the top of the area of your form. That will block all mouse interaction with the fields and combined with readonly and tabIndex should block all keyboard access too.
这篇关于preventDefault对焦点事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
