Wie entferne ich die zusätzliche Newline in Textbereich nach dem Löschen mit JQuery. Val()

Question

Ich habe ein Formular für die schnelle Produkteingabe. (FYI, ich habe die mit Tabellen Form so I rechts die Etiketten für jeden Eingang ausrichten.)

<table id="create-item"> 
    <tbody> 
    <tr> 
     <th> 
     <label for="name">Name</label> 
     </th> 
     <td> 
     <input class="name" name="name" /> 
     </td> 
    </tr> 
    <tr> 
     <th> 
     <label for="price">Price</label> 
     </th> 
     <td> 
     <input class="price" name="price" /> 
     </td> 
    </tr> 
    <tr> 
     <th> 
     <label for="description">description</label> 
     </th> 
     <td> 
     <textarea class="description" name="description" rows="3" cols="50" /> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Ich habe es so einrichten, dass, wenn Register oder gibt in dem ersten Eingabefeld gedrückt wird, Es bewegt den Benutzer zum nächsten $ (": input") Feld. Wenn der Benutzer im letzten Eingabefeld, das ein Textfeld ist, auf Enter (Schlüsselcode 13) klickt, lasse ich das Formular in der Datenbank anlegen, lösche die Werte der drei Eingabefelder und plaziere den Fokus erneut auf das erste Eingabefeld in Vorbereitung gib einen anderen Gegenstand ein. Hier ist die Funktion, die über "keypress" an den Textbereich mit der Klasse "description" gebunden ist.

nextFieldOnEnter: function(e) { 
    var $that = $(e.currentTarget); 
    if (e.keyCode == (13 || 9)) { 
    $that 
     .closest("tr") 
     .next("tr") 
      .find(":input") 
      .focus(); 
    }; 
}, 

createOnEnter: function(e) { 
    if (e.keyCode == 13) { 
    items.create(this.newAttributes()); 
    this.$("#create-item :input").val(''); 
    this.$("#create-item :input")[0].focus(); 
    }; 
}, 

Das Problem, das ich habe ist, dass, wenn der Benutzer zuerst die Seite lädt das Textfeld leer ist, aber nachdem der Benutzer in dem ersten Elemente eintritt und die Eingabetaste drückt das Textfeld leer zu sein scheint, aber in der Tat jetzt ein Newline-Zeichen enthält . Das bedeutet, dass der Einfügepunkt in der zweiten Zeile des Textfelds statt in der ersten Zeile sitzt, wenn der Benutzer für das zweite und alle zukünftigen Elemente erneut in das Textfeld gelangt, und wenn der Benutzer auf Enter klickt, um diese zusätzlichen Elemente zu speichern, werden sie gespeichert mit einem führenden Newline-Charakter.

Ich habe herausgefunden, dass dies passiert, weil ich die "Enter" -Taste erfassen und dass die Eingabetaste nicht nur meine if-Anweisung auslöst, sondern diese nach der if-Anweisung hinzufügt. Ich habe das herausgefunden, weil ich versucht habe, mich an "keydown" zu binden und das nächste Mal in der Nähe des Textfelds nicht diesen zusätzlichen Platz hatte, dies führte jedoch zu einem anderen Problem. Nun, da es an "keydown" gebunden ist, bedeutet dies, dass der Befehl "enter" an das erste Eingabefeld gesendet wird, wodurch der Fokus zum zweiten Eingabefeld springt.

Weiter habe ich versucht, es zu binden „keyup“ und die „Enter“ in der Eingabe der Klasse „Preis“ wird nun die Auslösung der createOnEnter das Element verursacht, ohne erstellt werden, so dass der Benutzer etwas in das Textfeld einzugeben.

Zusammenfassung:

keypress = zusätzliche Newline in Textfeld, nachdem sie mit .val Clearing ('')

keydown = Geben Ereignis "nextFieldOnEnter" bei der Eingabe mit Klasse "name" ausgelöst wird und den Fokus gegeben Eingabe mit Klasse "Preis"

keyup = Ereignis aus Preis eingeben löst "createOnEnter" aus, das an den Textbereich gebunden ist.

Wer irgendwelche Ideen, wie ich das Textfeld ohne diese Probleme beheben kann, weil ich die bin Erfassung Taste „Enter“ Felder vorzurücken und das Element speichern?

Ich weiß, dass ich .remove() die führenden Newline für die zweite und alle zusätzlichen Elemente vor dem Speichern, aber dies bedeutet, dass der Benutzer immer noch mit der Einfügemarke in der zweiten Zeile für jedes weitere Element angezeigt werden würde.

Answer 1

Das Standardverhalten der Enter-Taste in einem textarea ist eine neue Zeile hinzuzufügen. Sie müssen diese Aktion zu verhindern, in den createOnEnter Verfahren auftritt, fügen Sie e.preventDefault(); nach dem Tastendruck als die Enter-Taste entspricht.

createOnEnter: function(e) { 
      if (e.keyCode == 13) { 
      e.preventDefault(); 
      items.create(this.newAttributes()); 
      $("#create-item :input").val(''); 
      $("#create-item :input")[0].focus(); 
      }; 
     }