我正在尝试设计一个表单,如果它有某个类,则用户不应该能够与任何输入进行交互.由于各种原因,我想避免使用"禁用"属性.我试图阻止焦点事件的默认值,它不起作用.我在最新版本的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或类似于jQuery UI对话框小部件的jfriend00的想法,或者实际上使用jQuery UI对话框小部件来实现对话框.
对于文本字段,最好的办法是将它们设置为只读.这仍然允许标签和复制,但不允许修改.
<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属性.如果您不打算让用户能够与其进行交互,那么使用除可用标记之外的其他内容来显示数据(如div)也是有意义的.
你可以在这里看到readonly和tabIndex字段的例子:http://jsfiddle.net/jfriend00/9wWkQ/
现在,听起来我们有移动的规格.现在你说你甚至不希望他们能够选择文字.即使在不可编辑的普通div中也可以这样做.如果要阻止所有用户访问,甚至包括选择单个字段的文本,那么您将不得不求助于在表单区域的顶部放置一个空白的透明gif图像.这将阻止所有鼠标与字段的交互,并与readonly结合使用,tabIndex也应阻止所有键盘访问.
您无法阻止默认，但您可以立即将焦点恢复到先前获得焦点的元素（这几乎与该元素没有获得焦点相同）。这很容易实现，因为relatedTarget的 属性FocusEvent 包含对先前聚焦的元素的引用。
element.addEventListener('focus', (e) => {
if (e.relatedTarget) {
e.relatedTarget.focus();
}
});
| 归档时间： |
|
| 查看次数： |
9379 次 |
| 最近记录： |