在autoresizing textarea中輸入不斷關注元素的頂部

我有一個擴展的textarea。當textarea已經足夠伸展到達窗口的底部時，身體會閃爍/滾動回textarea的頂部，除非您滾動窗口，否則無法看到您輸入的最後一個字符。在autoresizing textarea中輸入不斷關注元素的頂部

該示例可在此jsfiddle中找到。我試圖添加滾動到身體

window.scrollTo(0, document.getElementsByTagName('textarea')[0].getBoundingClientRect().bottom);

我怎樣才能計算光標在窗口textarea的偏移？我正在考慮獲取光標的頂部偏移量，並且如果光標已經超出了摺疊範圍，只需將窗口滾動到其位置即可。在這個

幫助將不勝感激:)

來源

2013-11-22 dork

我覺得它做的是閃爍的事情，因爲我取代textarea的價值 – dork

我注意到另一件事是，它着重正確時，我打的退格鍵 – dork

哦，我想這是因爲退格按鈕不會觸發按鍵事件，而按鍵事件又不會調用textarea的調整大小功能。如何在輸入字符時複製該效果以避免閃爍？ – dork

我在堆棧中發現了一個解決方案！ https://stackoverflow.com/a/18262927/769326

我在調整大小函數中添加了代碼片段。

function resize(e){ 
var text = _this.value, 
    lines = text.split('\n'), 
    cursorPosition = $this.getCursorPosition(), 
    scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft, 
    scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop; 

    for(var i = 0, length = lines.length; i < length; i++){ 
     if(lines[i].length <= settings.charactersPerLine){ 
      continue; 
     } 

     var j = 0, 
      space = settings.charactersPerLine; 

     while(j++ <= settings.charactersPerLine){ 
      if(lines[i].charAt(j) === ' '){ 
       space = j; 
      } 
     } 

     lines[i+1] = lines[i].substr(space) + (lines[i + 1] || ''); 
     lines[i] = lines[i].substr(0, space); 
    } 

    _this.value = lines.join('\n'); 

    if(cursorPosition == text.length){ 
     setCaretToPos(_this, cursorPosition + 1); 
    } 
    else{ 
     setCaretToPos(_this, cursorPosition); 
    } 

    _this.style.height = elementHeight; 
    _this.style.height = _this.scrollHeight + 'px'; 
    _this.style.overflow = 'hidden'; 

    window.scrollTo(scrollLeft, scrollTop); 
}

這裏的jsfiddle

來源

2013-12-19 08:20:13 dork

我用所有鼠標位置發出以下，從未有過的問題。我不明白爲什麼它不適合這個實例。

var cX; 
var cY; 
document.onmousemove = function(e){ 
    cX = e.pageX; 
    cY = e.pageY; 
}

你可以使用它像我有：

window.scrollTo(0, cX);

或者乾脆把e.pageX到您的代碼示例。 cX，cY是光標座標。

來源

2013-12-16 14:45:38 StorySystems

對不起，插入/ textarea光標而不是鼠標光標 – dork

你的代碼很棒 - 我只是增加了一些毫秒的超時時間（大約100-200就足夠了），現在它表現很好。只是想知道（'focus'）事件處理函數的作用。並猜測你可以跳過在resize（）函數中調用focus（）...

來源

2013-12-17 13:50:46 Kjell

你在哪裏放超時？你編輯小提琴嗎？謝謝 – dork

是的，但沒有保存或分叉它... – Kjell

呃.............. – dork

在autoresizing textarea中輸入不斷關注元素的頂部

回答

相關問題