コンテンツの長さに合わせて入力フィールドのサイズを動的に変更するにはどうすればよいですか?

入力長に一致するように入力フィールドのサイズを変更する

入力フィールドの幅を調整して入力を正確に一致させるのは、難しい作業になる場合があります。 min-width を使用して最小幅を設定する従来のアプローチでは、常に望ましい結果が得られるとは限りませんが、この課題を克服する代替ソリューションがあります。

CSS 単位: ch

最新のブラウザは、現在のフォントの文字「0」（ゼロ）の幅を表す CSS 単位「ch」をサポートしています。このユニットはフォントに依存せず、入力フィールドの最小幅を定義する信頼性の高い方法を提供します。

JavaScript サイズ変更関数

入力に基づいて幅を動的に調整するには長さを指定するには、次の JavaScript 関数を使用できます。

function resizeInput() {
  this.style.width = this.value.length + "ch";
}

この関数は入力値を取得し、 "ch" 単位。入力に合わせてフィールドが拡大または縮小するようにします。

入力イベントへのバインド

サイズ変更関数をトリガーするには、それを "input" にバインドします。 "event:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

これらの手法を適用すると、入力に基づいて幅を流動的に調整する入力フィールドを作成でき、より多くの機能を提供できます。ユーザーフレンドリーでダイナミックなエクスペリエンス。

以上がコンテンツの長さに合わせて入力フィールドのサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。