0
<input type="text">

の幅を入力された文字に合わせるにはどうすればよいですか?

0

1 件の回答 1

1

input 要素の値が変更され、 input イベントが発生したときに、見かけ上非表示になっている span 要素へ input 要素の文字列を挿入することで文字列の幅を測り、その幅を input 要素へ設定することで、そのようなことが可能です。

function textMetrics() {
  const span = document.getElementById("textMetrics");
  const input = document.getElementById("txt");

  span.textContent = input.value;
  input.style.width = `${span.clientWidth}px`;
}

document.addEventListener("DOMContentLoaded", textMetrics);
document.getElementById("txt").addEventListener("input", textMetrics);
.container,
#txt,
#textMetrics {
  font: inherit;
}

#textMetrics {
  display: inline-block;
  position: absolute;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
<div class="container">
  <input id="txt" type="text" value="text">
  <span id="textMetrics" aria-hidden="true"></span>
</div>


もし HTML で行なわなければならない場合、contenteditable 属性を用いることも出来ます。ただし、編集可能な要素はフォーム制御子ではないため、編集した値は送信する前に非表示の input 要素に移しておくなどの処理が必要になります。

span {
  display: inline-block;
  min-width: 1em;
  border: 1px solid;
  white-space: nowrap;
}
<span contenteditable id="span">text</span>

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。