텍스트 영역에 자동 스크롤을 부여하는 방법

텍스트 영역, 텍스트 상자 및 버튼이있는 HTML 양식을 작성했습니다. 버튼을 클릭하면 텍스트 상자에 입력 한 내용이 텍스트 상자에 추가됩니다. 지금, 내 문제는 텍스트 영역이 완전히 채워지고 새로 도착한 텍스트가 아래쪽에 표시되며이 텍스트를 보려면 수동으로 스크롤해야한다는 것입니다.텍스트 영역에 자동 스크롤을 부여하는 방법

http://jsfiddle.net/yV76p/이 원하는하지만 모양이를 가지고있는 경우 아래로 스크롤하지 않고 항상 볼 수 있도록 도착 텍스트를 만들기 위해 자바 스크립트에서 어떤 방법이 있나요 ... 정말 모르겠어요

출처

2013-10-25 Vijith mv

이 자바 스크립트를 통해 달성하거나 브라우저를 jQuery를 할 수 있습니다하지 않습니다 당신의 텍스트 –

가능한 중복을 보려는 것을 알고 [A를하는 방법 업데이트 될 때 하단까지 계속 스크롤해야하는 텍스트 영역] (https://stackoverflow.com/questions/7373081/how-to-have-a-textarea-to-keep-scrolled-to-the-bottom-when-updated) – LoganMzz

도와주세요

var textarea = document.getElementById("textarea"); 

textarea.onkeyup = function(evt) { 
    this.scrollTop = this.scrollHeight; 
}

당신은 여기에 세부 사항을 찾을 수 있습니다 :이 예제는 내용의 텍스트가 추가 될 때 텍스트 영역의 크기를 증가 Auto resizing textarea link down jquery

출처

2013-10-25 04:56:07

을;

Example

자바 스크립트

var txt = $('#comments'), 
    hiddenDiv = $(document.createElement('div')), 
    content = null; 

txt.addClass('txtstuff'); 
hiddenDiv.addClass('hiddendiv common'); 

$('body').append(hiddenDiv); 

txt.on('input', function() { 

    content = $(this).val(); 

    content = content.replace(/\n/g, '<br>'); 
    hiddenDiv.html(content + '<br class="lbr">'); 

    $(this).css('height', hiddenDiv.height()); 

}); 

txt.trigger('input');

당신이하려고하는 그 어느 곳의 마지막에이 코드 조각을 추가 텍스트 영역에 대한 자동 스크롤 기능을 가지고 들어 CSS

body { 
    margin: 20px; 
} 

p { 
    margin-bottom: 14px; 
} 

textarea { 
    color: #444; 
    padding: 5px; 
} 

.txtstuff { 
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */ 
    overflow: hidden; 
} 

.hiddendiv { 
    display: none; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ 
} 

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */ 
/* these must be the same for both */ 
.common { 
    width: 500px; 
    min-height: 50px; 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    overflow: hidden; 
} 

.lbr { 
    line-height: 3px; 
}

출처

2013-10-25 05:06:02

텍스트 상자의 내용에 참석 :

var console = $('#area'); 
console.scrollTop(
console[0].scrollHeight - console.height());

DEMO

희망이 도움이 :)

출처

2013-10-25 05:39:09 ds345

텍스트 영역에 자동 스크롤을 부여하는 방법

답변

관련 문제