Metin alanı kaydırma çubuğunu varsayılan olarak en alta nasıl ayarlayabilirim?

97

Kullanıcı girişi gönderilirken dinamik olarak yeniden yüklenen bir metin alanım var. Her birkaç saniyede bir kendini yeniliyor. Bu metin alanındaki metin miktarı metin alanının boyutunu aştığında, bir kaydırma çubuğu görünür. Ancak kaydırma çubuğu gerçekten kullanılamaz çünkü aşağı kaydırmaya başlarsanız, birkaç saniye sonra metin alanı yenilenir ve kaydırma çubuğunu tekrar en üste getirir. Kaydırma çubuğunu varsayılan olarak en alttaki metni gösterecek şekilde ayarlamak istiyorum. Bunun nasıl yapılacağına dair bir fikri olan var mı?

— Moesef
kaynak

Güncellenirken en alta kaydırılacak bir metin

— Öğesinin

190

vanilya javascript ile oldukça basit:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

— Will P.
kaynak

Metin alanını aynı kod bloğuna yeni yüklediyseniz, bu çalışmaz. Doğru çalışmasını sağlamak için, bu kodu ayrı bir işleve koyun ve ardından yeni metin alanı değerini yükledikten sonra çağırın. Ardından istenildiği gibi çalışacaktır.

— blissweb

55

Bunu jQuery ile kullanabilirsiniz

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});

— Mahfud Harun
kaynak

jQuery ile gerçekten aşina değil. bunu javascript ile aynı alana mı koymalıyım yoksa yeni bir <script> elemanı yapmam ve yeni bir tür belirtmem gerekir mi?

— moesef

1

ve <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > etiketleri ekleyin :)

— P.

8

Düz JS'de yapabileceğiniz bir şeyi yapmak için site çapında bağımlılık eklemek kötü bir fikir gibi geliyor. Yapabilmen, yapman gerektiği anlamına gelmez.

— emix

0

Aynı sorunu yaşadım ve doğru kaydırma davranışını elde etmek için başlangıçta ayarlanabilecek bir öznitelik olmadığını öğrendim. Bununla birlikte, textArea'da metin güncellendikten sonra, aynı işlevin hemen ardından odağı () textArea olarak ayarlayarak metni aşağı kaydırabilirsiniz. Daha sonra focus(), kullanıcının bu alana giriş yapmasına izin vermek için başka bir giriş alanını da çağırabilirsiniz . Bu cazibe gibi çalışıyor:

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
kaynak

0

HTML'nizde ...

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

Javascript'inizde ...

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

Metin alanına yeni değeri yükledikten sonra scrollHeight'ı ayrı bir işleve ayarlamak için kodu yerleştirmeniz gerektiğini buldum.

— Blissweb
kaynak