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

Question

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

这是我目睹的恐怖：

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

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

我对@9​​87654325@ 的真正意思是我希望文本区域每行准确地保存 50 个字符。我怎样才能做到这一点，使其适用于所有主要浏览器？

编辑：我还想指出，在实际页面中，文本区域中的字符总数不受限制，因此必须可以进行 y 滚动。 textarea（或等效元素）是否自动包含换行符无关紧要，因为文本稍后会被分成最多包含 50 个字符的行，然后再使用 ajax post 将它们发送到服务器。

Answer 1

这个问题似乎只在 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

Answer 2

以下是如何在 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;
    }

这里我使用textarea 的col 属性并在不包含换行符的每个VALUE_OF_COL 字符中添加一个换行符。

在这里查看：JSFiddle