如何获取输入字段的可显示字符大小？答案

【问题标题】：How to get the displayable character size of the input field?如何获取输入字段的可显示字符大小？
【发布时间】：2023-04-04 01:57:01
【问题描述】：

在给定动态宽度（例如宽度 = 100%）的情况下，JavaScript 中是否可以获取输入字段上可以显示的最大字符数？

例如，如果输入字段的值为“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;
}

【问题讨论】：

最大字符数取决于那里出现的字符等等。解释为什么你会想要计算这样一个数量可能很有用，这实际上甚至不是一个定义明确的概念。（从字面上看，答案是无限的，因为你可以呈现任意数量的零宽度字符......）
@JukkaK.Korpela：这样做的原因是我希望能够在 Android 股票浏览器的输入字段上显示省略号。虽然文本溢出适用于 Chrome，但它不适用于 Android 股票浏览器。所以我只剩下 JavaScript 解决方案了。我的计划是使用 JavaScript 在输入字段的可见字符上应用省略号，这就是为什么我需要首先确定输入字段可以显示的字符数。
那么我认为您需要一个循环，从末尾删除字符，直到剩余的字符串加上省略号适合可用宽度。但重新考虑需要具有此类行为的输入字段的原因可能会更有成效。

标签： javascript html

【解决方案1】：

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

你可以避免这些，然后说“好吧，一个字母是 8px 宽（平均）所以长度是myInput.value.length * 8。或者你可以设置一个等宽字体，每个字母都有相同的宽度。

【讨论】：

嗨！感谢您的回答！你能提供一个用于计算的javascript吗？另外，由于某些限制，我无法控制字体的大小。所有尺寸的计算都应假设它们是动态的。
如果您为 1 个字母占用 8px，那么您将拥有nbLettersMax = input.offsetWidth / 8。我忘了提到用户也可以更改浏览器字体大小的事实......这打破了 8px 宽的假设。
感谢@Maxime 的创意！我目前正在尝试为它创建公式。
在计算中如何考虑字体系列？
经过深思熟虑，字体系列对字母的最大大小没有影响（由字体大小决定）。您唯一可以知道的字体系列是字体是否为等宽字体（因此所有字母的宽度相同，情况良好）。

【解决方案2】：

正如 Maxime Lorant 所说，它取决于很多参数。如果你想得到一个大概的尺寸，请试试这个：

修改

<style type='text/css'>
#your_input{
    font-family:font-family:"Times New Roman",Georgia,Serif;
    font-size:12px;
    letter-spacing:0px;
}
#ruler{
    font-family:font-family:"Times New Roman",Georgia,Serif;    
    font-size:12px;
    letter-spacing:0px;
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
}
</style>
<script language="javascript">
    function calLen() {
        // calculate the approximate length of characters
        var input_width = document.getElementById('your_input').offsetWidth;
        var ruler_width = document.getElementById('ruler').offsetWidth;
        var ruler_text = document.getElementById('ruler').innerHTML;
        var ruler_len = ruler_text.length;
        var input_len = parseInt((input_width/ruler_width)*ruler_len,10);
        alert("approximate length is " + input_len);
    }
</script>

<body>
    <input type="text" id="your_input" value="">
    <div id="ruler">0123456789abcdefghijklmnopqrstuvwxyz</div>
    <a href="javascript:calLen()">calLen</a>
</body>

【讨论】：

Uhmmm.. 我希望我没有要求太多，但你能把它翻译成纯 JavaScript 吗？或者您能否提供逐行解释，以便我将其翻译成纯 JavaScript？
我使用inputFieldWidth / fontsize 编写了一个代码，但是当我使用不同的字体系列时值不正确。