textarea 自动滚动到底部

Posted 2023-05-07

【中文标题】textarea 自动滚动到底部

【英文标题】：textarea auto scroll to bottom

【发布时间】：2016-09-15 23:42:03

【问题描述】：

如果插入了新文本，我正在尝试让我的文本区域滚动到底部。但我就是无法让它工作。

HTML

<textarea id="txt-area" readonly rows="21" cols="48"></textarea>
<button class="buttons" value="1">1</button>
<button class="buttons" value="2">2</button>
<button class="buttons" value="3">3</button>
<button class="buttons" value="4">4</button>
<input type="button" class="buttons" value="Test">
<input type="button" class="Backspace" value="DEL">

JavaScript

var values = [];

$(document).ready(function () 
    $(".buttons").click(function () 
        var cntrl = $(this).html();
        if ($(this)[0].nodeName == "INPUT" )
        
                cntrl = $(this).attr( "value" );
        

        $("#txt-area").val(function (_, val)
            return val + cntrl
        );
        values.push($(this).val());
        $("#txt-area").val(values.join("\n"));
    );
            $('.Backspace').on('click', function () 
            values.pop();
            $('#txt-area').val(values.join("\n"));
        );
);

$(document).ready(function()
    $(".buttons").click(function()
        $('#txt-area').scrollTop($('#txt-area').scrollHeight);    
    );

);

我的代码也在这个jsFiddle

【问题讨论】：

可能重复 [***.com/questions/7381817/…

How to have a textarea to keep scrolled to the bottom when updated的可能重复

How do I set textarea scroll bar to bottom as a default?的可能重复

【参考方案1】：

你需要改变

$('#txt-area').scrollTop($('#txt-area').scrollHeight);    

到

$('#txt-area').scrollTop($('#txt-area')[0].scrollHeight);    

见http://jsfiddle.net/cPYCV/48/

【讨论】：

确实，记录$('#txt-area').scrollHeight 输出undefined

【参考方案2】：

将此添加到您的 javascript

window.setInterval(function() 
  var elem = document.getElementById('txt-area');
  elem.scrollTop = elem.scrollHeight;
, 1000);