2010-05-27 11 views
6

Ich möchte ein Lehrbuch machen, wo es als gegebene Breite/Höhe beginnt. Wenn Benutzer mehr als die angegebene Menge eingeben, wird das Textfeld nach unten erweitert. Wie gehe ich dabei vor? Benütze ich CSS? Das grundlegende Textfeld zeigt nur eine Bildlaufleiste an, wenn Benutzer die Anzahl der zulässigen Zeilen zulassen. Wie mache ich es so, dass die Textbox die Zeilen um weitere 5 erweitert?Wie mache ich eine expandierende Textbox?

<form method="post" action=""> 
<textarea name="comments" cols="50" rows="5"></textarea><br> 
<input type="submit" value="Submit" /> 
</form> 

Wie verwende ich das von Robert Harvey erwähnte Beispiel? Ich habe nie JavaScript bevor verwendet ..

Antwort

5

jQuery Plugin AutoResize
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Schritte zu verwenden:

Sie jQuery benötigen. So fügen Sie es auf Ihrer Seite:

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 

Dann laden Sie das Plugin und steckte es in den gleichen Ordner wie Ihrer Webseite ein. So verweisen Sie es, fügen Sie diese auf Ihrer Webseite:

<script type="text/javascript" 
    src="autoresize.jquery.js"></script> 

nächstes ein Textfeld zu Ihrer Seite hinzufügen:

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;"> 
    Type something in here, when you get close to the end the box will expand! 
</textarea> 

Schließlich wird in einem Skriptblock, fügen Sie den Code, der die Plug-Haken bis zu die Textbox:

<script type="text/javascript"> 
    $('textarea#comment').autoResize({ 
     // On resize: 
     onResize : function() { 
      $(this).css({opacity:0.8}); 
     }, 
     // After resize: 
     animateCallback : function() { 
      $(this).css({opacity:1}); 
     }, 
     // Quite slow animation: 
     animateDuration : 300, 
     // More extra space: 
     extraSpace : 40 
    }); 
</script> 
+0

o das ist genial. genau das, was ich brauchte!! – jpjp

+0

Es tut mir leid, aber ich habe noch nie jquery verwendet. Kannst du mir bitte wie man das zur Arbeit bringt? Ich lud die Codes herunter und legte sie in . Aber die Textbox ist immer noch die gleiche – jpjp

+0

Hier ist ein gutes Lehrvideo: http://www.youtube.com/watch?v=Hk5oXFtYLwE Oder Sie können die jQuery-Dokumentation lesen: http://docs.jquery.com/Tutorials: Getting_Started_with_jQuery – mVChr

4

können Sie eine Bibliothek hinzufügen, wenn Sie sich interessieren, oder halten nur den Überblick über die scrollTop Unterkunft TextArea-.

Wenn scrollTop nicht Null ist, fügen Sie Ihre Zeilen hinzu.

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style> 
textarea{overflow-y:scroll} 
</style> 
<script> 
onload=function(){ 
    var who=document.getElementsByName('comments')[0]; 
    who.onkeyup=function(){ 
     if(who.scrollTop)who.rows=parseInt(who.rows)+5; 
    } 
} 
</script> 
</head> 
<body> 
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html> 
+1

Schön, einfach und Bibliothek-weniger, aber immer noch eine Menge Arbeit; [Geige] (http://jsfiddle.net/h7jmmwcv/). Einfügen mit der Maus (keyup nicht aufgerufen), Eingabe von Text von oben (scrolltop nicht geändert), Löschen von Text (Höhe nicht reduziert), lästige nutzlose Scrollbar sind einige der Dinge, die mich davon abhalten, sie zu benutzen – Hashbrown

1

Hier ist my solution mit nur Vanille Javascript.
Getestet, um in Chrome, Firefox & IE8 und höher zu arbeiten.

Auf Last oder es in einer Funktion Whack:

var element = document.getElementById('comments'); 
var retractsAutomatically = false; 

var sizeOfOne = element.clientHeight; 
element.rows = 2; 
var sizeOfExtra = element.clientHeight - sizeOfOne; 
element.rows = 1; 

var resize = function() { 
    var length = element.scrollHeight; 

    if (retractsAutomatically) { 
     if (element.clientHeight == length) 
      return; 
    } 
    else { 
     element.rows = 1; 
     length = element.scrollHeight; 
    } 

    element.rows = 1 + (length - sizeOfOne)/sizeOfExtra; 
}; 

//modern 
if (element.addEventListener) 
    element.addEventListener('input', resize, false); 
//IE8 
else { 
    element.attachEvent('onpropertychange', resize) 
    retractsAutomaticaly = true; 
} 

CSS & HTML:

textarea#comments { overflow:hidden; } 
<textarea id="comments" cols="50" rows="1"></textarea> 
Verwandte Themen