2013-10-25 1 views
2

Я написал форму HTML с текстовой областью, текстовым полем и кнопкой. Все, что я набрал в текстовом поле, будет добавлено в текстовое поле при нажатии кнопки. Теперь моя проблема заключается в том, когда текстовая область полностью заполнена, недавно появившийся текст появляется внизу, и мне нужно прокручивать вниз вручную, чтобы просмотреть этот текст. Существуют ли какой-либо метод в JavaScript, чтобы сделать поступающий текст, чтобы быть видимыми всегда без прокрутки вниз ... Пожалуйста, помогитеКак дать автоматический прокрутить до textarea

+0

Это может быть достигнуто с помощью Javascript или Jquery вашего браузера не знает, что вы хотите, чтобы просмотреть этот текст –

+0

Возможного дубликат [Как есть textarea, чтобы сохранить прокрутку снизу при обновлении] (https://stackoverflow.com/questions/7373081/how-to-have-a-textarea-to-keep-scrolled-to-the-bottom-when-updated) – LoganMzz

ответ

2

Я не совсем уверен, что это то, что вы хотите, но посмотреть этот:

http://jsfiddle.net/yV76p/

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

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

Вы можете найти подробную информацию об этом здесь: Auto resizing textarea link down jquery

0

Этот пример увеличивает размер текстового поля, как добавляется текстовое содержание;

Example

Javascript

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; 
} 
0

Для имеющих функцию автоматической прокрутки для текстового поля добавить этот кусок кода в конце, где когда-либо вы пытаетесь для просмотра содержимого из текстового поля:

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

DEMO

Надеется, что это помогает :)

Смежные вопросы