コンテンツの長さに基づいて入力フィールドのサイズを動的に変更するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-29 08:47:30

オリジナル

276 人が閲覧しました

How to Dynamically Resize Input Fields Based on Content Length?

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

問題: HTML を使用して入力フィールドの幅を内容に合わせて変更するJavaScript、PHP、または CSS は困難であることが判明しています。 min-width 属性は効果がなく、幅が固定されていると視覚的に乱雑になる可能性があります。

解決策:

フォントに依存しない測定値である CSS の ch 単位の使用を検討してください。ゼロ文字の幅に相当します。サイズ変更関数を入力イベントにバインドすることで、入力フィールドの幅を動的に調整できます。

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

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

ログイン後にコピー

これを補完するには、次の CSS スタイルを適用します。

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

ログイン後にコピー

これにより、入力フィールドは、必要なパディングとフォントサイズを維持しながら、その幅をコンテンツの長さに合わせて調整します。

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