Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужно прокрутить teaxtarea вниз до конца (https://javascript.ru/forum/dom-window/48878-nuzhno-prokrutit-teaxtarea-vniz-do-konca.html)

pashin76 20.07.2014 17:33

Нужно прокрутить teaxtarea вниз до конца
 
В поле teaxtarea вставляется большой кусок текста, курсор устанавливается в конец текста, но в поле teaxtarea отображается начало текста, а не его конец. Курсора, соответственно, не видно.

как прокрутить текст вниз?

ЗЫ если начать печатать, то текст прокручивается )

рони 20.07.2014 19:20

Цитата:

Сообщение от pashin76
В поле teaxtarea вставляется большой кусок текста

как вставляется?

рони 20.07.2014 19:54

Плавный или сразу скролинг teaxtarea вниз после вставки
 
pashin76,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
window.onload = function () {
    function d() {
        if (a.scrollTop < a.scrollHeight - a.clientHeight) a.scrollTop += 4, requestAnimationFrame(d); // a.scrollTop =  a.scrollHeight - a.clientHeight перемещение сразу
        else {
            var b = a.value.length;
            if (a.setSelectionRange) a.setSelectionRange(b, b);
            else if (a.createTextRange) {
                var c = a.createTextRange();
                c.collapse(!0);
                c.moveEnd("character", b);
                c.moveStart("character", b);
                c.select()
            }
            a.focus()
        }
    }
    var a = document.querySelector("#text");
    a.value += Array(20).join("qwerty\n");
    a.onpaste = d;
    d()
};
  </script>
</head>

<body>
   <textarea id="text" name="text"  cols="20"  rows="5"></textarea>
</body>

</html>

pashin76 20.07.2014 21:44

Цитата:

Сообщение от рони (Сообщение 321948)
как вставляется?

вот так:
$("#text").val(data + "\n");

рони 20.07.2014 22:31

pashin76,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var t = $("#text"),data = Array(20).join("qwerty\n");
        t.val(data + "\n").animate({scrollTop : t[0].scrollHeight - t[0].clientHeight},1500)
});
  </script>
</head>

<body>
   <textarea id="text" name="text"  cols="20"  rows="5"></textarea>
</body>

</html>

pashin76 21.07.2014 10:14

Супер, то что нужно
Спасибо огромное


Часовой пояс GMT +3, время: 02:45.