如何检测占位符文本在输入字段中溢出？

Question

我的问题是有没有办法使用 JavaScript 或 CSS 来检测输入字段的占位符是否溢出？我们有很多方法来查找输入字段中输入的值是否溢出。我们可以为此使用scroll width和offset width。但是滚动宽度不适用于占位符。我们可以text-overflow: ellipsis使用 CSS 来在溢出的占位符上显示省略号。但是我找不到任何 CSS 或 Javascript 方法来检测省略号是否应用于占位符或占位符文本是否在输入字段中溢出。

Answer 1

很简单：

const isPlaceholderOverflowed = inputId => {

  const input = document.getElementById(inputId);

  input.value = input.placeholder;

  const isOverflowed = input.scrollWidth > input.clientWidth;

  input.value = "";

  return isOverflowed;

}