时间戳

首页 > 解决方案 > 指针事件 - 当我使用制表键时没有一个不起作用

html - 指针事件 - 当我使用制表键时没有一个不起作用

问题描述

我正在制作一个表单，我正在使用一个类来禁用我的输入，甚至使用指针：无，当我尝试单击正确的输入时，我的输入不可编辑，但是当我使用“TAB”键时专注于输入，我可以编辑输入，我如何防止焦点不应该使用 Tab 键继续我的输入，并且应该允许编辑输入。

<form style="padding:10px; margin:10px" action="" class=" form-inline">
          <div class="form-group">
            <div class="input-group">
            <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control disabledClass" placeholder="1">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control disabledClass" placeholder="2" >
                </div>
              </div>

            </div>
          </div>
        </form>

CSS:
.disabledClass{
  background: #f1f1f1;
  pointer-events: none;
}

感谢您早日回复..

标签： htmlcss

解决方案

pointer-eventsCSS 规则只影响指针事件（想想鼠标事件，即使还有其他指针事件）。
通过键盘导航不是指针事件的一部分。

有一些 CSS 规则应该对您的情况有所帮助，但似乎没有一个可以正常工作，而且它们也没有标准化。

例如，我会认为非标准-moz-user-focus（仅在 FF 中）会这样做，但事实并非如此。user-select或非标准user-modify也不阻止它。
我发现的唯一方法实际上是通过 HTML，通过设置readonly和tabindex="-1"属性（disabled也可以，但通常带有一些暗淡的样式）：

input {
  pointer-events: none;
}
.no-focus {
  -moz-user-focus: none;
  -webkit-user-focus: none;
  -ms-user-focus: none;
  user-focus: none;
  -moz-user-modify: read-only;
  -webkit-user-modify: read-only;
  -ms-user-modify: read-only;
  user-modify: read-only;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<input type="text" class="no-focus" value="CSS">
<input type="text" readonly value="readonly" tabindex="-1">

<pre>First click this iframe then try to navigate using TAB</pre>

推荐阅读