ホームページ > ウェブフロントエンド > CSSチュートリアル > コンテンツの長さに合わせてテキスト入力の幅を自動スケールするにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-13 06:13:13
オリジナル
395 人が閲覧しました

How Can I Auto-Scale a Text Input's Width to Match Its Content Length?

値の長さに合わせてテキスト入力の幅を自動調整する

解決策:

はい、入力の size 属性を入力内容。 JavaScript を使用してこれを行う方法は次のとおりです:

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

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);
ログイン後にコピー

デモ:

[JSFiddle を参照](http://jsfiddle.net/nrabinowitz/NvynC/)

ただし、この方法では右側にパディングが追加される場合がありますが、これは状況に応じて異なります。ブラウザ。より厳密に適合させるには、[この](https://stackoverflow.com/questions/16401893/set-width-of-input-field-to) で説明されているような手法を使用してテキストのピクセル幅を計算できます。 -display-values-with-fixed-width-in-chrome) スタック オーバーフローの答え。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート