指定textarea元素中每行包含的字符数

Question

我需要指定textarea元素（Link to fiddle）中每行所包含的字符数。

这是我正在目睹的恐怖：

所以cols="50"实际上给了我以下行长度：

        | Without scroll | With scroll
Chrome  50                 47
FF      52                 50

我对cols="50"的真正含义是我希望textarea每行只包含50个字符。我如何实现这一点，以便它适用于所有主流浏览器？

编辑：我还想指出，在真实网页中，textarea中的字符总数不有限，因此必须进行y滚动。 textarea（或等效元素）是否自动包含换行符无关紧要，因为稍后将文本拆分为最多包含50个字符的行，然后再将它们发送到带有ajax post的服务器。

Answer 1

以下是如何在javascript中执行此操作：

<script>
    var textareas = document.getElementsByTagName("textarea");

    for(var i = 0; i < textareas.length; ++i){
        textareas[i].addEventListener("input", handleInput);
        textareas[i].cols += 3;
        handleInput(null, textareas[i]);
    }

    function handleInput(event, area){
       if(area === undefined) area = this;
       area.value = fixText( area.value, area.value.length, area.cols-3);
    }

    function fixText(text, length, limit){
        var counter = 0;
        for(var i = 0; i < length; ++i){
           var currChar = text[i];
           counter++;
            if(currChar === "\n"){
                counter = 0;
            } else if(counter > limit){
                text = text.substring(0,i) + "\n" + text.substring(i, text.length); 
                counter = 0;
            }        
        }
        return text;
    }

在这里，我使用col的{​​{1}}属性，并为每个不包含换行符的textarea个字符添加换行符。

请在此处查看：JSFiddle

Answer 2

看来这个问题只出现在Chrome中，所以你可以这样做：

<script>
    window.onload = function(){
        textareas = document.getElementsByTagName("textarea");
        var isChrome = navigator.userAgent.indexOf("Chrome") != -1;
        for(var i = 0; i < textareas.length; ++i){
            if(isChrome){
                textareas[i].style.width = textareas[i].offsetWidth + textareas[i].cols/3 + "px";
            }
        }
    }    
</script>

请在此处查看：JSFiddle