Bagaimana cara mengatur bilah gulir textarea ke bawah sebagai default?

97

Saya memiliki area teks yang sedang dimuat ulang secara dinamis saat input pengguna sedang dikirim. Ini menyegarkan sendiri setiap beberapa detik. Jika jumlah teks di area teks ini melebihi ukuran area teks, bilah gulir muncul. Namun bilah gulir tidak benar-benar dapat digunakan karena jika Anda mulai menggulir ke bawah, beberapa detik kemudian textarea menyegarkan dan membawa bilah gulir kembali ke atas. Saya ingin mengatur bilah gulir ke secara default untuk menampilkan teks paling bawah. Adakah yang punya ide bagaimana melakukannya?

javascript css scroll textarea moesef
sumber
Kemungkinan duplikat Cara memiliki textarea untuk tetap digulir ke bawah saat diperbarui
LoganMzz

Jawaban:

190

cukup sederhana, dalam vanilla javascript:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Will P.
sumber
Jika Anda baru saja memuat textarea di blok kode yang sama, ini tidak akan berhasil. Untuk membuatnya bekerja dengan benar, letakkan kode ini dalam fungsi terpisah dan kemudian panggil setelah Anda memuat nilai textarea baru. Maka itu akan bekerja sesuai keinginan.
blissweb
55

Anda dapat menggunakan ini dengan jQuery

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});
Mahfud Harun
sumber
tidak terlalu familiar dengan jQuery. apakah saya hanya akan menempatkan ini ke dalam area yang sama dengan javascript atau apakah saya perlu membuat elemen <script> baru dan menentukan tipe baru?
moesef
1
dan tambahkan tag <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > :)
Akan P.
8
Menambahkan ketergantungan seluruh situs hanya untuk melakukan sesuatu yang dapat Anda lakukan dalam JS biasa terdengar seperti ide yang buruk. Hanya karena Anda bisa, bukan berarti Anda harus melakukannya.
emix
0

Saya mengalami masalah yang sama dan menemukan bahwa tidak ada atribut yang dapat disetel pada awalnya untuk mendapatkan perilaku scrolling yang benar. Namun, setelah teks diperbarui di textArea, segera setelah di fungsi yang sama Anda dapat menyetel focus () ke textArea untuk membuatnya bergulir ke bawah. Anda kemudian dapat memanggil focus()beberapa bidang masukan lain juga untuk memungkinkan pengguna untuk memasukkan di bidang itu. Ini bekerja seperti pesona:

function myFunc() {
    var txtArea = document.getElementById("myTextarea");
    txtArea.value += "whatever"; // doesn't matter how it is updated
    txtArea.focus();
    var someOtherElem = document.getElementById("smallInputBox");
    someOtherElem.focus();
}
Mitesh Raval
sumber
0

Di HTML Anda ...

<textarea id="logTextArea" style="width:600px;height:200px;"></textarea>

Di Javascript Anda ...

<script language="javascript">

    function loadLog(logValue) {
        logTa = document.getElementById("logTextArea")
        logTa.value = logValue;
        scrollLogToBottom()
    }

    function scrollLogToBottom() {
        logTa = document.getElementById("logTextArea")
        logTa.scrollTop = logTa.scrollHeight;
    }

    loadLog("This is my really long text block from a file ... ")

</script>

Saya telah menemukan bahwa Anda perlu meletakkan kode untuk mengatur scrollHeight menjadi fungsi terpisah setelah memuat nilai baru ke dalam area teks.

blissweb
sumber