Question

在JavaScript中是否有一种方法可以获得在给定动态宽度（例如，宽度= 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。或者你可以设置一个等宽字体，每个字母都有相同的宽度。

Answer 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>

如何获得输入字段的可显示字符大小？

2 个答案: