javascript - 如何获取输入框可显示的字符大小？

Question

JavaScript 中有没有办法获取给定动态宽度(例如 width = 100%)的输入字段上可以显示的最大字符数？

例如，如果输入字段的值为“123456789”，由于宽度限制，只能显示/可见“1234567”，则最大可显示字符数为“7”。

布局示例:

----------
|01234567|
----------

当前代码:(我在使用不同的字体样式时遇到问题。此外，尚未考虑字体间距。 getFontSize 的代码来自 here 。)

function countLetters()
{
    var inputLong = document.getElementById('inputLong');
    var fontSize = getFontSize(inputLong);
    var fieldWidth = getWidth(inputLong);
    console.log('Number of Visible Characters: ' + (fieldWidth / fontSize) );
}

function getFontSize(parentElement)
{
    return Number(getComputedStyle(parentElement, "").fontSize.match(/(\d*(\.\d*)?)px/)[1]);
}

function getWidth(parentElement)
{
    return parentElement.offsetWidth;
}

Answer 1

这取决于很多参数:使用的字体、字体大小、字母间距...要知道在确定的大小中可以容纳多少个字符并不是很简单...

你可以避免这些并说“好吧，一个字母的宽度是 8px(平均)，所以长度是 myInput.value.length * 8。或者你可以设置等宽字体，其中每个字母具有相同的宽度。