मैं एक डिफ़ॉल्ट के रूप में textarea स्क्रॉल पट्टी को नीचे से कैसे सेट करूं?


97

मेरे पास एक textarea है जिसे गतिशील रूप से पुनः लोड किया जा रहा है क्योंकि उपयोगकर्ता इनपुट को अंदर भेजा जा रहा है। यह अपने आप को हर दो सेकंड में ताज़ा करता है। जब इस टेक्सटारिया में टेक्स्ट की मात्रा टैक्स्टेरिया के आकार से अधिक हो जाती है, तो एक स्क्रॉल बार दिखाई देता है। हालाँकि, स्क्रॉल बार वास्तव में उपयोग करने योग्य नहीं है क्योंकि यदि आप नीचे स्क्रॉल करना शुरू करते हैं, तो कुछ सेकंड बाद में टेक्स्टारिया ताज़ा हो जाता है और स्क्रॉल बार को वापस ऊपर तक लाता है। मैं सबसे अधिक पाठ नीचे डिफ़ॉल्ट रूप से स्क्रॉल बार सेट करना चाहता हूं। किसी को भी ऐसा करने का विचार है?


जवाबों:


190

बहुत सरल, वेनिला जावास्क्रिप्ट में:

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

यदि आपने केवल एक ही कोड ब्लॉक में textarea लोड किया है, तो यह काम नहीं करता है। इसे सही तरीके से काम करने के लिए, इस कोड को एक अलग फ़ंक्शन में रखें और फिर आपको नया टेक्स्टारिया मान लोड करने के बाद इसे कॉल करें। फिर यह इच्छानुसार काम करेगा।
1

55

आप इसे jQuery के साथ उपयोग कर सकते हैं

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

वास्तव में jQuery से परिचित नहीं है। क्या मैं इसे जावास्क्रिप्ट के समान क्षेत्र में डालूंगा या क्या मुझे एक नया <स्क्रिप्ट> तत्व बनाने और एक नया प्रकार निर्दिष्ट करने की आवश्यकता है?
moesef

1
और <स्क्रिप्ट भाषा जोड़ें = 'जावास्क्रिप्ट' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > टैग्स :)
विल पी।

8
साइट के व्यापक निर्भरता को जोड़ने से आप एक बुरे विचार की तरह सादे जेएस ध्वनि में कुछ कर सकते हैं। सिर्फ इसलिए कि आप का मतलब यह नहीं है कि आपको चाहिए।
14

0

मुझे एक ही समस्या थी और पता चला कि कोई भी विशेषता नहीं है जिसे शुरू में सही स्क्रॉलिंग व्यवहार प्राप्त करने के लिए सेट किया जा सकता है। हालाँकि, एक बार जब टेक्स्ट टेक्स्ट में अपडेट हो जाता है, तो एक ही फ़ंक्शन के तुरंत बाद आप टेक्स्ट पर ध्यान केंद्रित करने () को नीचे स्क्रॉल करने के लिए सेट कर सकते हैं। फिर आप focus()उस क्षेत्र में उपयोगकर्ता को इनपुट करने की अनुमति देने के लिए कुछ अन्य इनपुट फ़ील्ड पर कॉल कर सकते हैं । यह आकर्षण की तरह काम करता है:

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();
}

0

आपके HTML में ...

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

आपके जावास्क्रिप्ट में ...

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

मैंने पाया है कि आपको पाठ क्षेत्र में नया मान लोड करने के बाद स्क्रॉलहाइट को एक अलग फ़ंक्शन में सेट करने के लिए कोड डालने की आवश्यकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.