6

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

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

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

2 件の回答 2

4

scrollWidthoffsetWidth を比較することで可能です。

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

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);
input {
  border: 1px solid black;
  padding: 2px;
}
<input value="hgoe" style="width:40px">

2
  • 3
    私の環境の Firefox と Chrome は scrollWidth もパディング幅を含んでいますので、offsetWidth との比較で除外するべきはボーダー幅のみのようです。このスクリプトの場合、編集後は常にツールチップが表示されてしまいます。
    – mjy
    Commented 2018年4月11日 15:03
  • 気になったのでMDNに当たってみたところ、Element.clientWidthElement.scrollWidthと同様にpaddingは含むけれどborderは含まないようなので、borderをも含むElement.offsetWidthではなくこの2つを比較すると良さそうに思いました。 Commented 2018年4月12日 10:30
2

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

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

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

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);
#text {
  width: 200px;
}

#hidden {
  display: none;
}
<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>

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

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