JavaScript および jQuery で入力フィールドの幅をその内容に合わせて自動スケールするにはどうすればよいですか?

入力値に合わせて入力フィールドの幅を自動スケーリングする

Web 開発の領域では、幅を動的に調整することが望ましい場合がよくあります。入力フィールドの内容の長さに一致するように変更します。これにより、フィールドが画面上の必要なスペースのみを占めるようになります。 JavaScript と jQuery を使用してこれを実現する方法は次のとおりです。

解決策:

1.初期幅を自動に設定します:

まず、入力フィールドの幅プロパティを auto に指定します。これにより、フィールドはそのコンテンツに基づいて自然に拡張できます。

input {
  display: block;
  margin: 20px;
  width: auto;
}

2.キーストロークの幅の更新:

次に、jQuery を使用して、キーが押されるたびに入力フィールドのサイズ属性を更新します。この属性は、フィールドに保持できる文字数を決定します。コンテンツの長さに設定すると、フィールドは自動的に適切な幅に拡大縮小されます。

$('input[type="text"]').keyup(function() {
  $(this).attr('size', $(this).val().length);
});

3.ページ読み込み時のサイズ変更:

イベント ハンドラーを設定した後、ページの読み込み後にサイズ変更動作を手動でトリガーします。これにより、初期表示時にフィールドのサイズが正しく設定されます。

$('input[type="text"]').each(function() {
  $(this).attr('size', $(this).val().length);
});

例:

次の HTML について考えてみましょう。

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />

Whenページが読み込まれると、両方の入力フィールドの幅がテキストに合わせて調整されます。 content.

注:

このアプローチは入力フィールドの幅を効果的に拡大縮小しますが、右側にパディングが追加される可能性があります。より厳密にフィットさせるには、テキストのピクセル サイズを測定し、それに応じて幅プロパティを調整するなどの手法の使用を検討できます。

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