给定一个文本区域，有没有办法根据行数限制长度？

我有一个文本区域字段，我希望用户能够输入不超过 3 行。

那可能吗？

Fiddle: http://jsfiddle.net/nvLBZ/1/

我刚刚（2小时）创建了一个脚本always将文本区域的高度限制为 3 行。

1. 为特定文本区域计算字符的最大可能宽度（如果之前尚未计算）。
2. 计算每行的最少字数。

3. 克隆文本区域，以测试是否有必要继续该功能。当输入有效时，函数返回而不中断用户。

4. 否则，克隆的文本区域将用作参考，并且用户的文本区域将被删除。出于性能原因，用户的文本区域也是暂时不可见的。

5. 使用有效的方法填充文本区域：将已知小于文本区域宽度的块添加到文本区域中。
6. 当添加的块超过最大大小时，最后的字符将被单独删除，直到最终达到最大行限制。
7. 默认值已恢复。

代码如下，代码在底层实现（$(document).ready(...)).

(function(){        
    var wordWidthMappers = {};
    function checkHeight(textarea, maxLines){
        if(!(textarea instanceof $)) return; /*JQuery is required*/
        if(isNaN(maxLines) || !isFinite(maxLines) || maxLines == 0) return;
        var areaWidth = textarea.width();
        var oldHeight = textarea.css("height");
        var oldOverflow = textarea.css("overflow-y");
        var lineHeight = parseFloat(textarea.css("line-height"));
        var maxTxtHeight = maxLines*lineHeight + "px";

        /*Calculations for an efficient determination*/
        var fontstyles = "font-size:"+textarea.css("font-size");
        fontstyles += ";font-family:"+textarea.css("font-family");
        fontstyles += ";font-weight:"+textarea.css("font-weight");
        fontstyles += ";font-style:"+textarea.css("font-style");
        fontstyles += ";font-variant:"+textarea.css("font-variant");
        var wordWidth = wordWidthMappers[fontstyles];
        if(!wordWidth){
            var span = document.createElement("span");
            span.style.cssText = fontstyles+";display:inline;width:auto;min-width:0;padding:0;margin:0;border:none;";
            span.innerHTML = "W"; //Widest character
            document.body.appendChild(span);
            wordWidth = wordWidthMappers[fontstyles] = $(span).width();
            document.body.removeChild(span);
        }

        textarea = textarea[0];
        var temparea = textarea.cloneNode(false);
        temparea.style.visibility = "hidden";
        temparea.style.height = maxTxtHeight;
        temparea.value = textarea.value;
        document.body.appendChild(temparea);
        /*Math.round is necessary, to deal with browser-specific interpretations
          of height*/
        if(Math.round(temparea.scrollHeight/lineHeight) > maxLines){
            textarea.value = "";
            textarea.style.visibility = "hidden";
            if(oldOverflow != "scroll") textarea.style.overflowY = "hidden";
            textarea.style.height = maxTxtHeight;
            var i = 0;
            var textlen = temparea.value.length;
            var chars_per_line = Math.floor(areaWidth/wordWidth);
            while(i <= textlen){
                var curLines = Math.round(textarea.scrollHeight/lineHeight);
                if(curLines <= maxLines){
                    var str_to_add = temparea.value.substring(i, i+chars_per_line);
                    var nextLn = str_to_add.indexOf("\n");
                    if(nextLn > 0) str_to_add = str_to_add.substring(0, nextLn);
                    else if(nextLn == 0) str_to_add = "\n";
                    i += str_to_add.length;
                    textarea.value += str_to_add;
                } else if(curLines > maxLines){
                    textarea.value = textarea.value.substring(0, textarea.value.length-1);
                    i--;
                    if(Math.round(textarea.scrollHeight/lineHeight) <= maxLines) break;
                }
            }
            textarea.style.visibility = "visible";
            textarea.style.height = oldHeight;
            textarea.style.overflowY = oldOverflow;
        }
        temparea.parentNode.removeChild(temparea);
    }

    $(document).ready(function(){/* Add checker to the document */
        var tovalidate = $("#myTextarea");
        tovalidate.keyup(function(){
            /*Add keyup event handler. Optionally: onchange*/
            checkHeight(tovalidate, 3);
        });
    });
})();