根据内容指定文本区域的行数。 HTML,Javascript答案

【问题标题】：Specify No. of rows of textarea depending on content. HTML,Javascript根据内容指定文本区域的行数。 HTML,Javascript
【发布时间】：2010-02-05 16:36:23
【问题描述】：

您好，我有一个功能可以在用户键入文本区域时增加其行数，所以它工作正常。但是当表单在用户没有输入时将文本带入文本区域时，它不会增加行数，但它只显示开头定义的行数（rows =“1”），正如我需要的那样它是最小的行数。

我不知道将什么 Javascript（无 JQuery）函数应用于 textarea，因此它会扩展行数，当用户键入时，以及当表单向 textarea 显示多行文本时，所以它总是使用最少的行数。

任何帮助将不胜感激。

请随意更改我拥有的功能。

例如。

<script type="text/javascript">
function changeTextAreaLength(e){
    var txtLength = e.value.length;
    var numRows = 0 ;
    var arrNewLines = e.value.split("\n");

    for(var i=0; i<=arrNewLines.length-1; i++){
        numRows++;
        if(arrNewLines[i].length > e.cols-5) {
            numRows += Math.floor(arrNewLines[i].length/e.cols)
        }   
    } 
        if(numRows < 1) {
            e.cols = (txtLength % e.cols) + 1 >= e.cols ? ((txtLength % e.cols) + 1) : e.cols ;
        }else{
            e.cols = e.cols ;    
            e.rows = numRows;
        }
}
</script>


<textarea id="textarea1" rows="1" onkeyup="javascript:changeTextAreaLength(this);" />

【问题讨论】：

您的代码充满了错误；更正 fucntion 错字，将函数参数 obj 更改为 e 并更改函数名称以匹配 onkeyup 中的调用
谢谢，这已经是正确的了，我做的很快，我没有意识到。

标签： javascript html textarea

【解决方案1】：

是的，keyup 不足以捕捉输入内容可能发生的所有变化。甚至在您进行脚本更改之前，还需要考虑右键单击剪切/复制/粘贴、撤消/重做、拖放和拼写更正。

您没有任何希望捕捉所有这些情况，因此如果您想要对更改进行一般实时反应，您别无选择，只能轮询它（例如，使用间隔）。如果你想捕捉比轮询器更快的延迟打字的常见情况，你也可以添加 keyup。

您可能还考虑的字符计数的替代方法是检查scrollHeight 以查看文本区域是否已开始滚动。例如。类似：

<textarea id="q" rows="4" cols="80">hello</textarea>
<script type="text/javascript">
    function stretchy(element) {
        var value= element.value;
        function update() {
            var h= element.scrollHeight;
            if (h>element.offsetHeight || h<element.offsetHeight-48)
                element.style.height= (h+24)+'px';
        }
        element.onkeyup= update;
        setInterval(update, 1000);
        update();
    }

    stretchy(document.getElementById('q'));
</script>

【讨论】：

【解决方案2】：

首先，将“功能”改为“功能”。

其次，从您的 onkeyup 属性中删除“javascript:”。

第三，您正在调用 changeTextAreaLength()，但您的函数名为 expandtextarea()。

第四，你的函数说 expandtextarea(obj)，但你在函数中引用的是 e，而不是 obj。

<textarea id="textarea1" rows="1" onkeyup="expandtextarea(this);" />

【讨论】：