Dynamisch steigende Textfeldhöhe?

Question

Mögliche Duplizieren:
Autosizing Textarea

Hallo alle, Ich versuche, ein Problem zu lösen, und absolut nicht, wo mit ihm zu bekommen. Was ich versuche, ist die Höhe eines Eingabefeldes dynamisch zu ändern, wenn der Text des Benutzers die Breite überschreitet (sorta wie Facebooks Status-Update-Textfeld).

Sie geben eine kurze Aktualisierung ein, und wenn der Text länger als das Textfeld ist, erstellt er eine neue Zeile. Ich habe versucht, eine Textarea zu verwenden, aber aus irgendeinem Grund kann es nicht zwingen, um genau 1 Zeile standardmäßig zu sein.

Wer weiß, eine einfache Möglichkeit, dies zu tun? :(

Answer 1

Um die textarea zu strecken, geben Sie diese ein zu gehen (jQuery). http://www.unwrongest.com/projects/elastic/

Was die Höhe genau eine Zeile, Sie rows="1" im <textarea> Tag versuchen könnten, sowie CSS Entfernen Styling. Einige Browser können jedoch einen Mindesthöhe der Textbereich auf mehr als eine Zeile.

eine andere Lösung, die eine div auf dem Bildschirm zu verwenden wäre, dass, wenn der Benutzer darauf klickt, auf eine versteckte Textbox den Browser Fokus macht Der Benutzer tippt in die versteckte Textbox und der div erhält den Inhalt der Textbox über JavaScript t erhält dann den blinkenden Cursor, aber Sie könnten das Zeichen | in der div verwenden und es blinken lassen, obwohl das um den Zeitpunkt, an dem Sie es starten, langwierig wird. Ich würde versuchen, mit dem Text wieder persönlich :-)

hoffe, das hilft,

James

Answer 2

Sie manuell die Größe des textarea mit der CSS-Höhe und Breite Parameter steuern können. Durch das Binden eines Tastendruckereignisses an die textarea können Sie die Textmenge in der Box abrufen und die Höhe entsprechend anpassen. Zum Beispiel ist hier etwas jQuery, die 20 Pixel auf die Höhe der Box für alle 50 Zeichen hinzufügen, werden Sie setzen:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> 
</script> 

<textarea id="textbox" style="height:20px;width:400px;"></textarea> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#textbox").val(''); 
    $("#textbox").keypress(function() { 
     var textLength = $("#textbox").val().length; 
     if (textLength % 50 == 0) { 
      var height = textLength/50; 
      $("#textbox").css('height', 20+(height*20)); 
     } 
    }); 
}); 
</script> 

Sie können die Werte zwicken den gewünschten Effekt zu erhalten.