忽略只读文本框

Question

我使用 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

- yaakov

---

请尝试在“只读”之外添加“禁用”。 - JSelser

也许是 <input type="text" class="one" value="姓名：" readonly disabled>？ - Akshay

你是否考虑过在disabled属性中使用tabindex？https://dev59.com/JG855IYBdhLWcg3w1oPa - Aravona

我明白你的问题很好，因为很多人可能想要跳过只读输入文本。但在这种情况下，你是把一个输入框当做标签来使用吗？ - Erick Petrucelli

@ErickPetrucelli，有点。 - yaakov

如果您想要在只读文本框中提交值，请注意。如果文本框被禁用，则该值将不会被提交，因此同时使用readonly和disabled不是一个好的解决方案。相反，将readonly属性与tabIndex="-1"属性结合使用。这样，按Tab键将跳过文本框，并且文本框的值将在表单提交时被提交 - 如果您以其他方式更新这些文本值，例如使用AJAX调用，这一点非常重要！ - IdahoB

Answer 1

设置tabIndex

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

- KidBilly