Отключенное текстовое поле, доступное с помощью клавиши табуляции

Question

У меня есть два текстовых поля на форме. Один из них - это текстовое поле Enabled, которое доступно для редактирования , а другое - текстовое поле «Отключено», которое не редактируется. Я отключил , используя css стиль. Проблема, с которой я сталкиваюсь, заключается в том, что я могу получить доступ к отключенному текстовому окну , используя клавишу табуляции на клавиатуре, например, если я нажму на включенный текст и нажмите вкладку, чтобы перейти в отключенное текстовое поле, и я в состоянии ввести текст в нем.

Вот пример HTML-код

<input type="textbox" placeholder="Enabled" /> 
<div class="notEdit-overlay"></div> 
<div> 
    <input type="textbox" placeholder="Disabled" /> 
</div> 

Здесь стиль CSS

.notEdit-overlay 
{ 
    width: 1080px; 
    height: 99%; 
    left: 0px; 
    background: red; 
    position: absolute; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

А вот jsfiddle

Answer 1

Используйте отключенный атрибут на вашем входе.

<input type="text" disabled="disabled" placeholder="disabled" /> 

Также; нет текстового поля ввода типа, если вы хотите большой, используйте <textarea>value</textarea>

Answer 2

Назначают отключенный ящик tabindex -1

т.е. <input type="textbox" placeholder="Disabled" tabindex="-1" />