我正在尝试设计一种表单,如果它具有特定的类,则用户应该无法与任何输入进行交互。由于各种原因,我想避免使用“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>
您可以在以下位置查看示例http://jsfiddle.net/54Xka/ http://jsfiddle.net/54Xka/
EDIT:这将位于一个主要针对移动浏览器的网站上。我计划在显示模式对话框时禁用输入。模式对话框是使用我自己的代码实现的。显示和隐藏 div 是非常简单的事情。
EDIT 2:这就是我现在所拥有的:
$(".disabled :input").live({
focus: function() {
$(this).blur();
},
change: function(e) {
e.preventDefault();
}
});
它有一些小的美学问题,但它确实有效。当我有更多时间时,我可能会使用透明 gif 尝试 jfriend00 的想法,或者类似于 jQuery UI 对话框小部件所做的事情,或者实际上使用 jQuery UI 对话框小部件来实现对话框。
对于文本字段,最好的办法是将它们设置为只读。这仍然允许选项卡和复制,但不允许修改。
<input type="text" readonly="readonly" value="Can't change me">
如果您还想停止按 Tab 键,则功能正常的网页支持在页面上用于键盘访问的对象之间进行键盘导航。这意味着任何只是试图阻止焦点的选项都会中断任何通过键盘导航网页的尝试。因此,最好通过告诉浏览器该对象不是制表符停止位来阻止项目之间的制表符切换,并且当按下 Tab 键时它会很高兴地跳过它。您可以通过将对象的 tabIndex 设置为 -1 来实现此目的。键盘导航将永远不会停止,但会按预期工作。
<input type="text" readonly="readonly" tabIndex="-1" value="Can't change me or tab to me">
如果您使用的对象类型与文本字段不同,请更具体地说明对象类型。在诉诸扰乱网页预期功能的脚本之前,您应该追求支持您预期行为的 HTML 属性。如果您不希望用户能够与其交互,那么使用除用户可编辑标签之外的其他内容来仅显示数据(如 div)也可能是有意义的。
您可以在此处查看 readonly 和 tabIndex 字段的示例:http://jsfiddle.net/jfriend00/9wWkQ/ http://jsfiddle.net/jfriend00/9wWkQ/
现在,听起来我们有移动的规格。现在您说您甚至不希望他们能够选择文本。即使在不可编辑的普通 div 中也可以完成此操作。如果您想阻止所有用户访问,甚至包括选择各个字段的文本,那么您将不得不采取一些措施,例如在表单区域的顶部放置一个空白的透明 gif 图像。这将阻止所有鼠标与字段的交互,并与 readonly 和 tabIndex 相结合也应该阻止所有键盘访问。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)