跳过只读文本框[重复]答案

【问题标题】：skip over readonly textboxes [duplicate]跳过只读文本框[重复]
【发布时间】：2015-06-01 14:00:45
【问题描述】：

我正在使用 CSS 使两个复选框看起来像一个......

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>

问题在于，当用户在文本框中进行选项卡时，他会在 readonly 上进行选项卡，这不应该是可聚焦的。我怎样才能使 readonly 文本框不集中，焦点跳到下一个文本框？ Fiddle

【问题讨论】：

除了readonly之外试试disabled
也许<input type="text" class="one" value="Name:" readonly disabled> ?
您是否考虑过将 tabindex 与 disabled 一起使用？ stackoverflow.com/q/4112289/2932678
我知道您的问题很好，因为很多人可能希望跳过只读输入文本。但是在这种情况下，您是否使用输入作为标签？
如果您希望回发只读文本框中的值，请小心。如果文本框被禁用，则该值将不会被回发，因此一起使用 readonly 和 disabled 不是一个好的解决方案。相反，将 readonly 属性与 tabIndex="-1" 属性结合起来。 Tab 键将跳过文本框，文本框的值将在表单提交中回传 - 如果您以其他方式更新这些文本值，例如使用 AJAX 调用，这很重要！

标签： html css

【解决方案1】：

设置tabIndex

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

【讨论】：