So stoppen Sie Fenstersprünge beim Eingeben des Textbereichs mit automatischer Größenänderung

Question

Aug 16, 2013, 12:09 AM

So stoppen Sie Fenstersprünge beim Eingeben des Textbereichs mit automatischer Größenänderung

Ich verwende die akzeptierte Antwort aufdiese Frage So erstellen Sie ein Textfeld, das bei einem Textüberlauf vertikal erweitert wird:

<!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>

Es funktioniert gut, bis die Größe des Textbereichs länger als das Browserfenster wird. Zu diesem Zeitpunkt springt der obere Rand des Fensters bei jedem Tastendruck an den oberen Rand des Textbereichs. Können Sie mir helfen, zu verstehen, warum und wie das Problem behoben wird?

Eine ideale Lösung wäre, die Seite überhaupt nicht zu bewegen. Wenn es jedoch einfacher ist, den unteren Rand der Seite mit dem unteren Rand des Textbereichs zu verknüpfen, funktioniert dies auch.

Ich habe dieses Problem in Firefox 21.0 und Chrome 28.0:http://jsfiddle.net/CbqFv/

Zu kommentieren