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

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">

Answer 2

这是我想出的，我根据您的输入是否包含值来切换 text-align 属性。 我知道它有点卡在输入框的中心并且不平滑，但我不知道您是否可以对此进行任何更改。

 let inp = document.getElementById("inp"); inp.addEventListener("keyup", function() { if (!inp.value) { inp.style.textAlign = "left"; } else { inp.style.textAlign = "center"; } });

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

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