如何根据字体大小限制文本区域中的字母数量？答案

【问题标题】：How to limit the number of letters in a textarea on the basis of font size?如何根据字体大小限制文本区域中的字母数量？
【发布时间】：2014-09-29 09:06:13
【问题描述】：

我想根据字体大小调整文本大小，然后在另一个页面上显示。

<select name="fonts" id="fontBox">
    <optgroup>
        <option value="0" selected="selected">Select Font</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    </optgroup>
</select>

<textarea maxlength="100" class="mycss" id="inputData" name="data" spellcheck=false wrap="physical">
</textarea>

如何根据要放置/显示文本的 div 的字体和固定大小截断字母。

【问题讨论】：

标签： php jquery html

【解决方案1】：

已编辑：试试这个，它会根据值改变文本区域和字体：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    textarea{
    width:300px !important;
    height:100px !important;
    }


    </style>
    <select name="fonts" id="fontBox">

              <option value="0" selected="selected">Select Font</option>
              <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="300">300</option>

         </select>
            <textarea maxlength="100" class="mycss" id="inputData" name="data" spellcheck=false wrap="physical"></textarea>

    <script>
    $(document).ready(function(){
        var size
        $("#fontBox").on('change',function(){
            console.log($("#inputData"));
    $("#inputData").css('font-size', +$("#fontBox").val()+"%");
    var w = $("#inputData")[0].clientWidth;
    var h = $("#inputData")[0].clientHeight;
     size = parseInt((w*h)/$("#fontBox").val());
    alert(size);
    if(size > 100){
        size = 100;
    }else{
    size = 30;

}
        });

    $('#inputData').keydown(function(){
    limitText($('#inputData'),size,size);
    });

    $('#inputData').keyup(function(){
        limitText($('#inputData'),size,size);
        });
    });


    function limitText(limitField, limitCount, limitNum) {
        if (limitField.val().length > limitNum) {
            limitField.val(limitField.val().substring(0, limitNum));
        } else {
            limitCount=limitNum - limitField.val().length;
        }
    }
    </script>

注意：为了您的信息，我将 textarea 的字符长度设置为等于选择框中的值。

【讨论】：

感谢回复，但是我应该如何限制用户1280by780 div可以包含多少个字母或者我应该如何计算？
@Questionare 我将根据您的要求提供一些示例代码更改。等待更新。
@Questionare 添加了现在尝试，如果有任何问题，请随时询问。
你好，这适用于字体大小的文本区域限制，即字体大小=字符长度，但我想问如何根据所选字体限制字符显示在 div 上，如果我们将字体改为大尺寸，那么它只能包含适合 div 的 div 宽度和高度的字符
,textarea 可以包含任意数量的字符，但我们只找到最适合 div 尺寸相对于字体大小的字符

【解决方案2】：

您可以使用 jquery 函数来限制文本。

$("#fontBox").val(); will give the font size

在此之后，您可以根据所选值设置文本区域的最大长度。参考This

【讨论】：

也从你身边做一些效果。 :D