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

値の幅に合わせてテキスト入力を自動スケーリングする

Web サイトのデザイナーとして、入力のサイズと機能を最適化するという課題に遭遇することがよくあります。フィールドを追加して、シームレスなユーザー エクスペリエンスを提供できるようにします。一般的な要件の 1 つは、テキスト入力要素の幅を、それに含まれる値の幅と一致するように自動的に調整することです。

解決策:

これを実現するには、次のようにします。 input 要素の size 属性を利用して、ユーザーが入力したテキストの長さを文字数で指定します。入力値に応じてこの属性を動的に更新することで、入力フィールドの幅を動的に調整できます。

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

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

ライブ デモンストレーション:

https:// jsfiddle.net/nrabinowitz/NvynC/

追加考慮事項:

このメソッドでは、右側にわずかなパディングが発生する可能性がありますが、これはブラウザによって異なります。より正確に適合させるには、jQuery を使用して入力テキストのピクセル サイズを計算する手法の使用を検討してください。

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