web-dev-qa-db-ja.com

更新時にテキストエリアを下にスクロールし続ける方法

私の問題は、ここの袖口から少し離れているので、私はこれをできる限り説明するようにします。

テキスト領域があり、cssが#object{overflow:hidden;resize:none;}。スクロールバーが表示されないようにして、サイズを変更しているところです。このテキストエリアは外部スクリプトのコンソールと同期され、更新されます。ただし、デフォルトでは、テキストを強調表示して要素の下部にドラッグしない限り、上部に留まります。当然ながら、これは矢印キー以外の方法で下にスクロールする唯一の方法です。

プログラム的に、更新時にテキスト領域を一番下に保つ方法はありますか？ユースケースに対応するために自動スクロールさせるとよいでしょう。

javascripthtmlcssscrolltextarea
22
TERMtm

あなたはjavascriptでそれを行うことができます。以下のように、scrollTopプロパティを使用してテキスト領域のscrollHeightプロパティを設定します。

document.getElementById（ "textarea"）。scrollTop = document.getElementById（ "textarea"）。scrollHeight 
31
Ujjwal Manandhar

JQueryを使用することで、textareaの内容がいつ変更されるかを知ることができます。

$("#object").change(function() {
  scrollToBottom();
});

以下を使用して一番下までスクロールします。

function scrollToBottom() {
  $('#object').scrollTop($('#object')[0].scrollHeight);
}

jquerybyexample.blogspot.com から取得したスクロールコード。

22
Adam Bailin

JavaScriptを使用

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

Jqueryを使用

$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);​​​
7
ViPuL5

汎用JQueryプラグイン

ここで、任意の要素のscrollBottom用の一般的なjqueryプラグイン：

$.fn.scrollBottom = function() {
  return $(this).scrollTop($(this)[0].scrollHeight);
};

使用法：

$("#logfile").val( $("#logfile").val() + "this is new line test\n" ).scrollBottom();
2
Roland
function checkTextareaHeight(){
   var textarea = document.getElementById("yourTextArea");
   if(textarea.selectionStart == textarea.selectionEnd) {
      textarea.scrollTop = textarea.scrollHeight;
   }
}

Textareaの内容が変更されるたびにこの関数を呼び出します。外部の影響を編集できない場合は、定期的にsetIntervalを使用してこの機能を有効にしてください。

1
Rob W