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

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

「min-width」を使用して入力フィールドの最小幅を設定しようとすると、期待どおりに動作しない場合は、代替ソリューションが必要です。そのような解決策の 1 つは、特定のフォントの文字「0」の幅を表す「ch」CSS ユニットを利用することです。

最新のブラウザでは、次の CSS を使用できます:

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

内容に基づいて入力フィールドの幅を調整するには、JavaScript 関数を「input」イベントにバインドできます。

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

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

この JavaScript 関数は、一致するように入力フィールドの幅を変更します。その値の長さに、パディングに対応する 1 'ch' を加えたもの。イベント リスナーは、入力値が変更されるたびに幅が更新されることを保証します。

注: このアプローチは、ブラウザーの「ch」単位との互換性の問題により、すべてのシナリオに適しているとは限りません。必要な機能を確保するために、常にさまざまなブラウザーやオペレーティング システムでコードをテストしてください。

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