How to set max-Zeilen der textarea-input-tag?

Baue ich html+css (pure, no BS) Chat-Fenster. Ich habe gravierende Probleme mit der Eingabe der Nachricht.

Was ich Suche ist die Eingabe, wo user schreiben können, die seine Botschaft. Das wäre entweder input auf textarea tag. Ich möchte, Effekt ähnlich zu dem, was FB macht, wenn die Zeile voll ist, eine weitere Zeile beginnt. Das begrenzt meine Möglichkeiten zu textarea. Ich brauche submit-button und übermitteln Sie die EINGABETASTE. Also ich benutze es in form tags.

<form>
<textarea></textarea>
<input type="submit" value="Send message">
</form>

Was ich nicht undestand ist, wie ich das format textarea?

  1. Wie Sie starten von einer Linie und bewegen sich bis zu einigen max-Zeilen-Wert (ich will damit nur für Zeilen) und wenn die max-Linien erreicht ist, dann beginnen überlaufen Nachricht?
  2. Zu erkennen, wie Sie Umschalt+enter um eine neue Zeile erstellen?
InformationsquelleAutor Kārlis Janisels | 2017-02-08
  1. 3

    Versuchen, diesen code

    <form>
<textarea rows="10" cols="10" maxlength="200" style="resize:none;"></textarea>
<input type="submit" value="Send message">
</form>

$(document).ready(function() {
    $('textarea').live("keypress", function(e) {
        if (e.keyCode == 13) 
        {
            $('form').submit();
        }
    });
});
    • Die Verwendung der .live () - Methode wird nicht mehr empfohlen, da neuere Versionen von jQuery bieten bessere Methoden, die nicht seine Nachteile. Ab jetzt alles in jQuery Punkte auf "on" - Ereignis. Trotzdem werde ich bis-Abstimmung Ihre Antwort, die für ältere Versionen von jQuery. Gut Gemacht
    InformationsquelleAutor Ganesh Radhakrishnan
  2. 1

    Diese könnte helfen (am besten mit jQuery, onDomReady und dezent hinzufügen, das keydown-event der textarea) :

    <html>
  <head><title>Test</title></head>
  <body>
    <script type="text/javascript">
      var keynum, lines = 1;

      function limitLines(obj, e) {
        //IE
        if(window.event) {
          keynum = e.keyCode;
        //Netscape/Firefox/Opera
        } else if(e.which) {
          keynum = e.which;
        }

        if(keynum == 13) {
          if(lines == obj.rows) {
            return false;
          }else{
            lines++;
          }
        }
      }
      </script>
    <textarea rows="4" onkeydown="return limitLines(this, event)"></textarea>
  </body>
</html>

    *Edit - Erklärung: Es fängt das keypress-wenn Sie die ENTER-Taste gedrückt wird, und nicht nur fügen Sie eine neue Zeile, wenn Zeilen in der textarea die gleiche Anzahl, wie die Zeilen der textarea. Sonst erhöht sich die Anzahl der Zeilen.Verwenden Sie es als Ihre Notwendigkeit.

    • nicht decken Sie die Rücktaste
    InformationsquelleAutor Rana Ghosh
Schreibe einen Kommentar