javascript - 从 textarea 到 div 的文本具有有限的宽度和高度

Question

我需要将 textarea 中的文本放入受宽度和高度限制的 div 中。这是我的 jsfiddle：http: //jsfiddle.net/ptCoder/8XL7n/30/

例如：我的 div 宽度为 100 像素，最大高度为 100 像素。我需要在 textarea 中输入文本，该文本将出现在 div 框中。

这是另一个示例，但效果不佳：根据在固定宽度和高度框中拟合文本限制文本长度

我需要像删除、退格和复制/粘贴这样的实现。

我尝试使用以下代码防止高度大小：

if (currentHeight >= window.maxHeight) {  
    //alert('sim');
    var $th = $(this);
    $th.val($th.val().replace(/./, function(str) {
        return '';
    }));
    e.preventDefault();
}

但我有删除、退格和复制粘贴等方面的错误……</p>

另一个问题是文本在 textarea 中消失...

Answer 1

你可以试试这个：

<script>
$(document).ready(function(){
    $('#inputData').keydown(function(){
    limitText($('#inputData'),100,100);
    });

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

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 maxlength="100" class="mycss" id="inputData" name="data" spellcheck=false wrap="physical"></textarea>

Answer 2

为什么不能只使用最大宽度和最大高度？

#target {
    max-width:200px;
    max-height:200px;
}

这应该限制目标的大小。