html - 如何在输入字段中居中占位符/输入文本，但保持光标左对齐

Question

我想在输入字段中将占位符和键入的输入居中，但是当没有输入时，我希望光标保持左对齐。例如，如果我使用:

input {
  text-align: center;
  width: 60px;
}

::placeholder {
  text-align: center;
}

<input type="text" placeholder="hello">

这将成功地将我的占位符和我键入的任何输入对齐到中心，但会使光标在占位符的中心而不是左侧闪烁

我希望光标位于输入中的占位符“hello”中的 h 之前，但是当我键入任何输入时，功能应该保持不变，即输入应该居中。只有在没有输入时，光标才应左对齐。

Answer 1

考虑到 :placeholder-shown，您可以轻松做到这一点.不需要JS

input {
  text-align: center;
  width: 60px;
}

::placeholder {
  text-align: center;
}

input:placeholder-shown {
  text-align: left;
}

<input type="text" placeholder="hello">