skip over readonly textboxes

Question

I am using CSS to make two checkboxes look like one...

input {
  font-family: serif;
  font-size: 1.3em;
  background: rgba(5, 1, 0, .7);
  /* Really good color!! */
  color: white;
}
.one {
  border: 1px solid black;
  border-radius: 3px 0px 0px 3px;
  border-right: none;
  width: 58px;
  padding: 14px;
  transition: all .7s ease-in;
}
.two {
  border: 1px solid black;
  border-radius: 0px 3px 3px 0px;
  text-decoration: none;
  border-left: none;
  width: 100px;
  text-align: right;
  padding: 14px;
  transition: all .7s ease;
}
input:focus {
  border: 1px solid black;
  box-shadow: 0px 0px 0px white;
  outline: none;
}
.one:focus {
  border-right: none;
}
.two:focus {
  border-left: none;
  width: 100px;
}

<input type="text">
<br>
<br>
<input type="text" class="one" value="Name:" readonly>
<input type="text" class="two" placeholder="John Doe">
<br>
<br>

The problem is that when a user tabs through the textboxes, he tabs over the readonly one, which is not supposed to be focusable. How can I make it so that the readonly textbox is not focused on, and the focus skips to the next textbox? Fiddle

Have you considered using tabindex along with disabled? http://stackoverflow.com/q/4112289/2932678 — Aravona, Jun 01 '15 at 14:02
I understand that your question is nice, because many people may want skipping readonly input text. But in this case, are you using an input as a label? — Erick Petrucelli, Jun 01 '15 at 14:06
Be careful if you want the value in the readonly textbox to be posted back. If the textbox is disabled, then the value will NOT be posted back, so using readonly and disabled together is not a good solution. Instead, combine the readonly attribute with a tabIndex="-1" attribute. Tabbing will skip over the textbox AND the value of the textbox will get posted back on a form submission - if you are updating those text values other ways, such as with an AJAX call, this is important! — IdahoB, Mar 07 '17 at 18:15

score 12 · Answer 1 · answered Jun 01 '15 at 14:03

12

Set the tabIndex

<input type="text" class="one" tabIndex="-1" value="Name:" readonly>

answered Jun 01 '15 at 14:03

KidBilly

3,408
1
26
40

skip over readonly textboxes

1 Answers1