如何檢測占位符文本在輸入字段中溢出？

Question

我的問題是有沒有辦法使用 JavaScript 或 CSS 來檢測輸入字段的占位符溢出？ 我們有很多方法來查找輸入字段中輸入的值是否溢出。 我們可以為此使用scroll width和offset width 。 但滾動寬度不適用於占位符。 我們可以給text-overflow: ellipsis of 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;
}

Answer 2

感謝@MasihJahangiri 的回答，我設法在 Angular-14 中制定了一個指令：

@Directive({
    selector: '[AutoResizeInput]',
})
export class AutoResizeInputDirective implements OnInit {
    @Input() clientPlaceholder = '';

    constructor(private elementRef: ElementRef) {}

    ngOnInit(): void {
        const input = this.elementRef.nativeElement;

        if (!this.clientPlaceholder.length || this.clientPlaceholder == undefined || this.clientPlaceholder == null) {
            throw new Error('AutoResizeInputDirective - Input element must have "clientPlaceholder" property defined!');
        }

        input.setAttribute('value', this.clientPlaceholder);
        const css = `width: ${input.scrollWidth}px`;
        this.elementRef.nativeElement.setAttribute('style', css);
        input.value = '';
    }
}

在模板中剛剛添加了 Input 元素：

<input
    cbpAutoResizeInput
    [clientPlaceholder]="item.placeholder"
    ... />