コンテンツに基づいて入力フィールドの幅を動的に調整するにはどうすればよいですか?

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

提供された CSS コード style="min-width:1px;"入力フィールドでは効果的に機能しない可能性がありますが、入力フィールドの内容に基づいて入力フィールドの幅を動的に調整する代替ソリューションが存在します。このアプローチには、選択したフォントの文字 '0' (ゼロ) の幅を表す CSS ユニット 'ch' (文字) の利用が含まれます。

このソリューションを実装するには、JavaScript を利用して「input」イベント。ユーザーが入力フィールドに入力するたびにトリガーされます。このイベント ハンドラー内で、次のアクションを実行できます:

<code class="javascript">var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

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

さらに、入力フィールドの外観を調整するために、次のように CSS を適用できます:

<code class="css">input{ font-size:1.3em; padding:.5em; }</code>

一緒に、これらの変更により、読みやすさを維持しながら、入力フィールドの幅を流動的に調整してコンテンツに対応できるようになります。 「ch」単位により、幅が入力された文字に比例するようになり、動的に応答する入力フィールドが得られます。

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