width
が指定された<input type="text">
で作ったテキストボックスに、ある長さの文字列が入っているとして、「その文字列が全て見えているか(溢れていないか?)」をJavaScriptで判定したいです。
何か手段があるのでしょうか?
ちなみに、フォントは等幅ではないので、文字数による判定はできないです。
最終的にやりたいことは、「文字列が溢れている場合に限り、マウスを載せるとポップアップで内容を全て表示する」という機能です。
scrollWidth
と offsetWidth
を比較することで可能です。
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">
scrollWidth
もパディング幅を含んでいますので、offsetWidth
との比較で除外するべきはボーダー幅のみのようです。このスクリプトの場合、編集後は常にツールチップが表示されてしまいます。
アイディアの一つですが、テキストフィールドと同等のスタイルを持つ隠し要素を作成し、そのサイズをチェックするという手段が考えられます。
下記の例では、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>