43163


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

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

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


CC BY-SA 3.0
2018-04-11T08:16:10.723
43160
2018-04-11T12:18:25.800
8078
question
javascript
<input type="text">に入っている文字列が全て見えているかどうかを判定したい


アイディアの一つですが、テキストフィールドと同等のスタイルを持つ隠し要素を作成し、そのサイズをチェックするという手段が考えられます。

下記の例では、`display:none;`で隠した`span`要素に対して、`input`要素のスタイルを適用、入力値を`span`要素にコピーして`span`要素の幅をチェックしています。

入力フィールドに文字列を入力することで、動的に文字の溢れがチェックできているかと思います。  
ブラウザによっては、xボタンでテキストフィールドの幅が変わるため、その際は、隠し要素の幅をそれに合わせて調整すると良いかもしれません。

[code]

    var text = $("#text");
    var hidden = $("#hidden")
    var result = $("#result");
    
    // 隠しspan要素にinput要素のスタイルを適用
    hidden.css({
     "font-family": text.css("font-family"),
     "font-size": text.css("font-size"),
     "padding": text.css("border-width"),
    });
    
    // 文字をコピーし幅をチェック
    function checkVisible() {
      hidden.text(text.val());
      var msg = text.width() < hidden.width() ? "溢れている" : "溢れていない";
      result.text(msg);
    }
    
    checkVisible();
    
    text.on("keyup", checkVisible);
[/code]

[code]

    #text {
      width: 200px;
    }
    
    #hidden {
      display: none;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <input id="text" type="text" value="すたっく・おーばー・ふろー"/>
    
    <p id="result"></p>
    
    <span id="hidden"></span>
[/code]


CC BY-SA 3.0
2018-04-11T10:03:40.827
43162
2018-04-11T10:03:40.827
27930
43160
answer


`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]


CC BY-SA 3.0
2018-04-11T10:35:45.303
43163
2018-04-11T12:18:25.800
2018-04-11T12:18:25.800
3475
3475
43160
answer