Disabled text box accessible using tab key

Question

i have two text boxes on a form.One is the Enabled text box which is editable and another one is the Disabled text box which is not editable.I have disabled it using a css style. The issue that i'm facing is that i'm able to access disabled textbox using the tab key of the keyboard like if i click on the enabled text box and press tab it moves to the disabled text box and i'm able to enter text in it.

Here is the sample html code

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

Here is the css style

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

And here is the jsfiddle

Answer 1

Use the disabled attribute on your input.

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

Also; there is no input type textbox, if you want the big one, use <textarea>value</textarea>

Answer 2

Assign the disabled box a tabindex of -1

i.e. <input type="textbox" placeholder="Disabled" tabindex="-1" />