<input type="text">
の幅を入力された文字に合わせるにはどうすればよいですか?
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>