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

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

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" >

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 :slight_smile:

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.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.