javascript - 如何将 HTML 输入光标定位在居中占位符的开头

Question

如何将光标定位到占位符的开头(而不是输入字段的开头)而不是中间，同时仍保持占位符文本居中？

<input type="text" name="input_query" id="input_query" autofocus style="text-align: center; width: 100%" placeholder="Describe what's happening in your photo" autocomplete="off"/>

Answer 1

使用 ::placeholder 仅将 CSS 应用于占位符:

input {
  width: 100%
}
input::placeholder {
  text-align: center;
}

<input type="text" autofocus placeholder="Describe what's happening in your photo" autocomplete="off"/>

如果您希望光标出现在占位符的开头，您可以做类似的事情，尽管它很奇怪并且一旦用户开始输入就不会居中:

input {
  width: 65%;
  padding-left: 35%;
}

<input type="text" autofocus placeholder="Describe what's happening in your photo" autocomplete="off"/>