在textarea中限制每行的行和字符(Javascript,jQuery)

时间:2017-07-17 11:31:28

标签: javascript jquery html

我需要的是能够限制textarea中的行数。并限制每行中的字符数(强制在添加最大字符数时添加换行符。

我对“rows”和“cols”属性不感兴趣。它们不起作用。

此外,即使用户剪切或粘贴某些内容,或者如果他返回某行并对其进行修改,我也希望它能正常工作。

1 个答案:

答案 0 :(得分:0)

不确定这是否过于复杂,但您可以遍历textarea并在每个X字符处添加换行符。此解决方案不允许用户插入自己的换行符(它会删除任何现有的换行符)。

<textarea onkeyup="formatTextArea(this)"></textarea>

<script type="text/javascript">
    function formatTextArea(myArea)
    {
        //strip off any line breaks first
        var str = myArea.value.replace(/\n|\r/g, "");
        var result = '';
        var i = 0
        var formattedText = '';
        //number of lines needed
        var limit = 5
        // number of characters
        var limitPerLine = 20;

        // loop through the text, adding a new line every limitPerLine characters
        // stop after limit lines
        while (str.length > 0 && i < limit) 
        {
            i++;
            formattedText += str.substring(0, limitPerLine);
            str = str.substring(limitPerLine);

            //only add a new line if we're not at the end of the content
            if(str.length > 0 && i < limit)
            {
                formattedText += '\n';
            }
        }   
        myArea.value = formattedText;
    }
</script>