pointer-event - none is not working when I use tab key

Question

I am making a form where I am using a Class to disabled my inputs using pointer-even: none, my input is not editable when I am trying to click on the input which is correct, but when I am using "TAB" key it is focusing on input and I can edit the input, how i can prevent focus should not go on my input using tab key, and should allow to edit the input.

<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;
}

your early reply appreciated..

Answer 1

pointer-events CSS rules only affects pointer events (think of mouse-events, even though there are other pointer-events).
Navigating through keyboard is not part of the pointer events.

There were some CSS rules that were supposed to help in your situation, but none seems to properly work, and they aren't standardized anyway.

For instance, I would have thought that the non standard -moz-user-focus (only in FF) would have done this, but it doesn't. user-select or non-standard user-modify do not prevent it either.
The only way I found is actually though HTML, by setting both the readonly and the tabindex="-1" attributes ( disabled would also do, but generally comes with some dimmed styling):

 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>