如何在输入字段中将占位符/输入文本居中，但保持光标向左对齐 [英] How to center placeholder/input text in an input field, but keep the cursor left aligned

问题描述

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

I want to center both the placeholder and the typed input in an input field, but when there is no input I want the cursor to remain left-aligned. For example, if I use:

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

::placeholder {
  text-align: center;
}

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

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

this will successfully align my placeholder and any input I type into the center, but makes the cursor flash in the center of the placeholder instead of to the left

我想将光标移动到输入中占位符"hello"中的h之前，但是当我键入任何输入时，功能应保持不变，即输入应居中.仅当没有输入时，光标才应保持对齐.

I would want to cursor to be before the h in "hello" which is the placeholder in the input, but when I type any input the functionality should remain the same, i.e. the input should be centered. The cursor should only be left aligned when there is no input.

推荐答案

您可以考虑

You can easily do this considering :placeholder-shown. No need for JS

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

::placeholder {
  text-align: center;
}

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

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

这篇关于如何在输入字段中将占位符/输入文本居中，但保持光标向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！