使用 jQuery 在文本区域中向下滚动

发布于 2024-12-20 14:02:23 字数 541 浏览 0 评论 0原文

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <textarea id="one" class="inner">
    Goodbye
</textarea>
</div>

$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");

实时： http://jsfiddle.net/tGFmq/

我怎样才能让这个文本区域自动向下滚动？

原文

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <textarea id="one" class="inner">
    Goodbye
</textarea>
</div>

$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");

LIVE: http://jsfiddle.net/tGFmq/

how can i make automatically scroll to down in this textarea?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

×眷恋的温暖 2024-12-27 14:02:23

将此位添加到您的代码中（最好是在您拥有的任何插入的末尾）：

    var psconsole = $('#one');
    if(psconsole.length)
       psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());

Add this bit to your code (preferably at the end of whatever inserts you have):

    var psconsole = $('#one');
    if(psconsole.length)
       psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());

回复收藏 0 原文

终止放荡 2024-12-27 14:02:23

请参阅此现场演示：此处

要计算底部 scrollTop，您只需从 scrollHeight 中减去高度即可：

var oneDiv = $("#one");
bottom = oneDiv.prop('scrollHeight') - oneDiv.height()

然后您可以设置其scrollTop到bottom，或者使用令人惊叹的jQuery 的animate()< /code>很酷的动画。

现场演示：此处

See this Live Demo: here

To calculate the bottom scrollTop, you can simply subtract the height from the scrollHeight:

var oneDiv = $("#one");
bottom = oneDiv.prop('scrollHeight') - oneDiv.height()

Then you can set its scrollTop to bottom, or use amazing jQuery's animate() for cool animation.

Live Demo: here

回复收藏 0 原文

乖乖 2024-12-27 14:02:23

我意识到我的问题是我的代码位于错误的位置。 ->放在元素下并解决问题（菜鸟错误......） - 只是给大家一个提醒。

回复收藏 0 原文

寻找一个思念的角度 2024-12-27 14:02:23

<body>
    <textarea id="textarea-1" onfocus="setCss(this)" type="text" name="" autofocus>demo</textarea><br/>
    <button class="btn" onclick="setCss()">定位光标</button>
</body>
<script>
    function setCss(opt) {
        var sr = document.getElementById("textarea-1");
        sr.scrollTop = sr.scrollHeight;   // 内容滚动到最后一行
        var len = sr.value.length;
        setSelectionRange(sr, len, len); //将光标定位到文本最后 
        }

    function setSelectionRange(input, selectionStart, selectionEnd) {
        if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(selectionStart, selectionEnd);
        }
        else if (input.createTextRange) {
            var range = input.createTextRange();
            range.collapse(true);
            range.moveEnd('character', selectionEnd);
            range.moveStart('character', selectionStart);
            range.select();
        }
    }
    </script>
</body>

<body>
    <textarea id="textarea-1" onfocus="setCss(this)" type="text" name="" autofocus>demo</textarea><br/>
    <button class="btn" onclick="setCss()">定位光标</button>
</body>
<script>
    function setCss(opt) {
        var sr = document.getElementById("textarea-1");
        sr.scrollTop = sr.scrollHeight;   // 内容滚动到最后一行
        var len = sr.value.length;
        setSelectionRange(sr, len, len); //将光标定位到文本最后 
        }

    function setSelectionRange(input, selectionStart, selectionEnd) {
        if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(selectionStart, selectionEnd);
        }
        else if (input.createTextRange) {
            var range = input.createTextRange();
            range.collapse(true);
            range.moveEnd('character', selectionEnd);
            range.moveStart('character', selectionStart);
            range.select();
        }
    }
    </script>
</body>

回复收藏 0 原文

~没有更多了~