当文本对齐居中时，插入符号出现在占位符onfocus的末尾

Caret appear at end of placeholder onfocus when text-align is centered

本文关键字：占位符 onfocus 符号 对齐 文本 插入      更新时间：2023-09-26

这不是特别重要，我很容易就解决了这个问题，添加:

 onfocus="this.placeholder = '';" onblur="this.placeholder = 'Search...';"

然而，只是出于好奇，这是如何做到的?这里是小提琴:https://jsfiddle.net/vjLvssmp/

在CSS中有一种方法，还是需要JS?

谢谢,约翰。

—EDIT

可以使用text-indent和占位符选择符来实现。

.whitesearch {
  ...
  text-indent: 45px;
}
.whitesearch::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-indent: 0px;
}

这里有一个例子。https://jsfiddle.net/nonyok0q/3/

相关文章：