[解決済み】入力フィールドの幅を入力内容に合わせて調整する。

2022-04-06 17:35:37

質問

<html>
  <head>
  </head>
  <body>
    <input type="text" value="1" style="min-width:1px;" />
  </body>
</html>

これは私のコードですが、うまくいきません。HTML、JavaScript、PHP、CSSで、最小幅を設定する他の方法はありますか？

テキスト入力フィールドの幅を動的に変化させ、入力フィールドがそのコンテンツの周りを流れるようにしたいのです。すべての入力は、組み込みのパディングである 2em これが問題で、2つ目の問題点は min-width は、入力では全く動作しません。

幅は1pxで、それ以上は必要なときだけにしてください。

あなたの期待することは、テキストボックスの内容に基づいてテキストボックスの幅に動的にスタイルが適用されることのようです。その場合、テキストボックスのコンテンツが変更されたときに実行される js が必要になります。これ :

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

注：この解決策は、すべての文字が正確に 8px の幅になります。CSS-ユニット "ch" (文字) を使うこともできます。これは、選択したフォントの文字 "0" の幅を表します。このユニットについてはこちら .