Comment arrêter fenêtre sauter en tapant dans un redimensionnement automatique textarea

J'utilise la réponse acceptée à this question pour construire une zone de texte qui se développe verticalement déversoirs texte:Comment arrêter fenêtre sauter en tapant dans un redimensionnement automatique textarea

<!DOCTYPE html> 
<html> 
<head> 
<title>autoresizing textarea</title> 
<style type="text/css"> 
textarea { 
border: 0 none white; 
overflow: hidden; 
padding: 0; 
outline: none; 
background-color: #D0D0D0; 
resize: none; 
} 
</style> 
<script type="text/javascript"> 
var observe; 
if (window.attachEvent) { 
observe = function (element, event, handler) { 
    element.attachEvent('on'+event, handler); 
}; 
} 
else { 
observe = function (element, event, handler) { 
    element.addEventListener(event, handler, false); 
}; 
} 
function init() { 
var text = document.getElementById('text'); 
function resize() { 
    text.style.height = 'auto'; 
    text.style.height = text.scrollHeight+'px'; 
} 
/* 0-timeout to get the already changed text */ 
function delayedResize() { 
    window.setTimeout(resize, 0); 
} 
observe(text, 'change', resize); 
observe(text, 'cut',  delayedResize); 
observe(text, 'paste', delayedResize); 
observe(text, 'drop', delayedResize); 
observe(text, 'keydown', delayedResize); 

text.focus(); 
text.select(); 
resize(); 
} 
</script> 
</head> 
<body onload="init();"> 
<textarea rows="1" style="height:1em;" id="text"></textarea> 
</body> 
</html>

Il fonctionne bien jusqu'à ce que la taille de la zone de texte se développe plus que la fenêtre du navigateur. À ce moment-là, le haut de la fenêtre saute en haut de la zone de texte chaque fois que vous appuyez sur une touche. Pouvez-vous m'aider à comprendre pourquoi et comment y remédier?

Une solution idéale serait d'empêcher la page de se déplacer. Mais s'il est plus facile de garder le bas de la page attaché au bas de la zone de texte, cela fonctionnera aussi.

J'ai cette question dans Firefox 21,0 et Chrome 28.0: http://jsfiddle.net/CbqFv/

Source

2013-08-15 eirikarvey

Je n'ai pas ce même problème, dans FF, mais ne voient dans Chrome .. –

Save the scrollLeft, scrollTop valeurs, puis les restaurer après le redimensionnement de la zone de texte:

function resize() { 
    var scrollLeft = window.pageXOffset || 
    (document.documentElement || document.body.parentNode || document.body).scrollLeft; 

    var scrollTop = window.pageYOffset || 
    (document.documentElement || document.body.parentNode || document.body).scrollTop; 

    text.style.height = "auto"; 
    text.style.height = text.scrollHeight + 'px'; 

    window.scrollTo(scrollLeft, scrollTop); 
}

jsFiddle: http://jsfiddle.net/losnir/nnkeH/1

Source

2013-08-15 22:27:40 losnir

merci pour cela, @losnir: D – dork

@losnir, Connaissez-vous un moyen de le faire, sauf dans le contexte d'un div scrollable? J'ai une zone de texte qui est à l'intérieur d'un div quickview donc sa position n'est pas celle de la fenêtre mais de la div. – NeedsHelp

vous devez faire défiler la page pour: position de barre de défilement + (hauteur de textarea après redimensionnement - hauteur de textarea avant le redimensionnement)

est ici le code:

function resize() { 
     var scrollLeft = window.pageXOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollLeft; 

     var scrollTop = window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop; 

     var prevHeight = text.style.height.slice(0, -2); 
     text.style.height = "auto"; 
     var nextHeight = text.scrollHeight; 
     text.style.height = text.scrollHeight + 'px'; 
     window.scrollTo(scrollLeft, scrollTop + (nextHeight - prevHeight)); 
    }

OU vous pouvez le faire en utilisant jquery (basé sur this answer):

$('body').on('keyup', 'textarea', function (e) { 
     var scrollTop = $(document).scrollTop(); 
     var prevHeight = $(this).height(); 
     $(this).css('height', 'auto'); 
     var nextHeight = this.scrollHeight; 
     $(this).height(nextHeight); 
     $(document).scrollTop(scrollTop + (nextHeight - prevHeight)); 
    }); 
    $('textarea').keyup();

Source

2014-03-30 04:06:57 Hafez

Connaissez-vous un moyen de le faire, sauf dans le contexte d'un div scrollable? J'ai une zone de texte qui est à l'intérieur d'un div quickview donc sa position n'est pas celle de la fenêtre mais de la div. – NeedsHelp

Comment arrêter fenêtre sauter en tapant dans un redimensionnement automatique textarea

Répondre

Questions connexes