根据内容指定textarea的行数.HTML,Java脚本

Question

嗨我有一个功能,当用户键入时,增加textarea的行数,所以它工作正常.但是当表单将文本带入textarea时,用户没有输入,它不会增加行数,但它只显示开头定义的行数(rows ="1"),因为我需要它是最小的行数.

我不知道是什么的Javascript(无JQuery的)功能应用到文本区域,因此将扩大行号,当用户类型,当形式带来了一个多行文本到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);" />

Answer 1

是的,keyup几乎不足以捕捉输入内容可以改变的各种方式.即使在进行脚本化更改之前,还可以右键单击剪切/复制/粘贴,撤消/重做,拖放和拼写更正.

你没有抓住所有这些案例的希望,所以如果你想对变化做出一般的实时反应,你就别无选择,只能轮询它(例如使用间隔).如果您想捕获只是以比轮询器更快的延迟键入的常见情况,您也可以添加键盘.

您可能还会考虑使用字符计数的替代方法来检查scrollHeighttextarea是否已开始滚动.例如.就像是:

<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>