Question

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

<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的字体和固定大小来截断字母。

Answer 1

编辑：尝试此操作，它会根据值更改textarea和字体：

    <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的字符长度等于选择框中的值。

Answer 2

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

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

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

如何根据字体大小限制textarea中的字母数？

2 个答案: