入力フィールドの幅を入力に合わせて動的に調整する

コンテンツの長さに合わせて入力フィールドの幅を動的に調整すると、ユーザー エクスペリエンスが向上し、乱雑なレイアウトを防ぎます。固定幅を設定すると余分なスペースやテキストが切り取られる可能性がありますが、動的なアプローチにより、視覚的に魅力的で機能的な入力フィールドが保証されます。

残念ながら、CSS の min-width プロパティを使用した最小幅の設定は、次の場合には機能しません。入力フィールド。ただし、最新のブラウザでは、「ch」(文字幅) と呼ばれる代替単位が提供されています。これはフォントに依存せず、どのフォントの文字「0」の幅と等しくなります。

動的な入力フィールドの幅を作成するには、次の JavaScript コードを使用できます:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

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

このコードは、入力フィールドの幅を ch 単位のテキスト長と等しくなるように更新する、サイズ変更関数を入力イベントにバインドします。さらに、CSS で入力フィールドのスタイルを次のように定義できます。

input{ font-size:1.3em; padding:.5em; }

これで、内容に基づいて自動的に拡大または縮小する、動的に調整可能な入力フィールド幅の実装が完了しました。