указатель-событие - ни один не работает, когда я использую клавишу табуляции

Question

Я делаю форму, в которой я использую класс для отключения моих входов, используя даже указатель: нет, мой ввод не редактируется, когда я пытаюсь щелкнуть по вводу, который является правильным, но когда я использую "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;
}

Ваш ранний ответ приветствуется..

Answer 1

pointer-events Правила CSS влияют только на события указателя (вспомните события мыши, даже если есть другие события указателя).
Навигация по клавиатуре не является частью событий указателя.

ТамБыли некоторые правила 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;
}

First click this iframe then try to navigate using TAB