56510

[code]

    <input type="text">
    
[/code]

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


CC BY-SA 4.0
2019-07-09T04:13:18.130
56506
2019-07-09T06:59:40.107
12297
question
html
<input type="text">の要素の幅を入力された文字に合わせるにはどうすればよいですか？


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

[code]

    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);
[/code]

[code]

    .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%);
    }
[/code]

[code]

    <div class="container">
      <input id="txt" type="text" value="text">
      <span id="textMetrics" aria-hidden="true"></span>
    </div>
[/code]

* * *

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

[code]

    span {
      display: inline-block;
      min-width: 1em;
      border: 1px solid;
      white-space: nowrap;
    }
[/code]

[code]

    <span contenteditable id="span">text</span>
[/code]


CC BY-SA 4.0
2019-07-09T06:59:40.107
56510
2019-07-09T06:59:40.107
32986
56506
answer