<input type="text">に入っている文字列が全て見えているかどうかを判定したい


`width`が指定された`<input
type="text">`で作ったテキストボックスに、ある長さの文字列が入っているとして、「その文字列が全て見えているか（溢れていないか？）」をJavaScriptで判定したいです。

何か手段があるのでしょうか？  
ちなみに、フォントは等幅ではないので、文字数による判定はできないです。

最終的にやりたいことは、「文字列が溢れている場合に限り、マウスを載せるとポップアップで内容を全て表示する」という機能です。




`scrollWidth` と `offsetWidth` を比較することで可能です。

`offsetWidth` はボーダーとパディングの幅も含んでいるので、それは除外する必要があります。

[code]

    function setTooltip(event) {
      const INPUT_PADDING_BORDER = 6;
      var input1 = event.target;
      if (input1.offsetWidth - INPUT_PADDING_BORDER < input1.scrollWidth) {
        input1.title = input1.value;
      } else {
        input1.title = '';
      }
    }
    document.querySelector('input').addEventListener('input', setTooltip);
[/code]

[code]

    input {
      border: 1px solid black;
      padding: 2px;
    }
[/code]

[code]

    <input value="hgoe" style="width:40px">
[/code]




`scrollWidth` と `offsetWidth` を比較することで可能です。

`offsetWidth` はボーダーとパディングの幅も含んでいるので、それは除外する必要があります。

[code]

    function setTooltip(event) {
      const INPUT_PADDING_BORDER = 6;
      var input1 = event.target;
      if (input1.offsetWidth - INPUT_PADDING_BORDER < input1.scrollWidth) {
        input1.title = input1.value;
      } else {
        input1.title = '';
      }
    }
    document.querySelector('input').addEventListener('input', setTooltip);
[/code]

[code]

    input {
      border: 1px solid black;
      padding: 2px;
    }
[/code]

[code]

    <input value="hgoe" style="width:40px">
[/code]

