コンテンツの幅に合わせて入力テキストフィールドを自動スケールするにはどうすればよいですか?

入力テキスト フィールドを値の幅に合わせて自動スケールする方法

Web 開発では、実際の幅に合わせて入力テキスト フィールドの幅を動的に調整する必要がよくあります。コンテンツ。これにより、フィールドが広すぎず狭すぎずに済むため、ユーザー エクスペリエンスが大幅に向上します。

size 属性の使用

自動スケーリングを実現する簡単な方法は、size 属性を利用することです。この属性は、新しい行に折り返されるまでに入力フィールドに保持できる文字数を指定します。サイズ属性を入力フィールドに入力された値の長さに動的に設定することで、フィールドの幅がコンテンツと一致することを確認できます。

function resizeInput() {
  $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
  .keyup(resizeInput)
  .each(resizeInput);

この jQuery コードは、キー押下イベントをリッスンし、サイズ属性を更新します。それに応じて。さらに、入力フィールドの初期値と一致するように初期サイズを設定します。

考慮事項

size 属性の使用は自動スケーリングには効果的ですが、ブラウザーに依存するパディングが発生する可能性があります。入力フィールドの右側にあるより厳密に適合させるには、jQuery を使用してテキストのピクセル サイズを計算するなどの代替手法の使用を検討してください。

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