时间戳

首页 > 解决方案 > Pointer-Events Not allowed 不会停止键盘输入

css - Pointer-Events Not allowed 不会停止键盘输入

问题描述

指针事件不会阻止键盘跳到下拉箭头并按空格键打开下拉菜单。是否有 CSS 来阻止键盘交互？下面是我试图阻止指针/键盘/光标与下拉列表交互的示例。它似乎在代码片段中有效，但在我的网站上无效。我正在使用chrome进行测试。使用引导程序 3。

.disabled{
   pointer-events: none !important;
    cursor: not-allowed !important;
    -moz-user-focus: none !important;
    -webkit-user-focus: none !important;
    -ms-user-focus: none !important;
    user-focus: none !important;
    -moz-user-modify: read-only !important;
    -webkit-user-modify: read-only !important;
    -ms-user-modify: read-only !important;
    user-modify: read-only !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div><a href="#">Above Link</a></div>
<div class="btn-group disabled"><a href="#" class="btn btn-warning">Warning</a><a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="true"><span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></div>  
<div><a href="#">After Link</a></div>

标签： csstwitter-bootstrap-3less

解决方案

按钮组中的链接不会遵循按钮组的禁用设置，因为它们是链接；您不能禁用链接。即使您可以找到一种使其在特定浏览器中运行的骇人听闻的方法（并且在线上有很多），该代码也永远不会得到普遍支持。

最好的方法是隐藏按钮组中的链接。

您可以创建 2 个看起来完全相同的链接。其中只有一个具有 'data-toggle="dropdown"' 属性。如果您希望禁用下拉菜单，请显示没有属性的链接并隐藏具有属性的链接。如果要启用下拉菜单，请执行相反的操作。

这是我能提供的最接近纯 CSS 的解决方案。

推荐阅读