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

[shahzadsiddiqui8]

I am making a form where I am using a Class to disabled my inputs using pointer-even: none, my input 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 stop 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;
> }

[PaulOB]

@shahzadsiddiqui8

I am using a Class to disabled my inputs

Why don’t you use html properly and use the disabled attribute and all accessibility is built in?

<input disabled type="text" class="form-control disabledClass" placeholder="2" >

@shahzadsiddiqui8

how i can stop focus should not go on my input using tab key, and should allow to edit the input.

How can you edit it if you can’t tab to it and you can’t click it? Is this some sort of mind control trick

I think you may be trying to do something specific but you haven’t explained in clearer enough detail for us to really help you.

You can use tabindex-1 to stop the tabbing but it still seems as though you just want a disabled input which is done with the disabled attribute.