Comment supprimer le saut de ligne supplémentaire dans textarea après l'avoir effacé avec JQuery .val()

Question

J'ai un formulaire pour la saisie rapide du produit. (FYI, je la forme prévue avec des tables ainsi je peux juste aligner les étiquettes pour chaque entrée.)

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

j'ai mis en place de telle sorte que lorsque la patte ou entrer est pressé dans le premier champs de saisie, il déplace l'utilisateur vers le champ $ suivant (": input"). Lorsque l'utilisateur clique sur enter (keycode 13) dans le dernier champ de saisie qui est une zone de texte, le formulaire crée l'élément dans la base de données, efface les valeurs des trois champs de saisie et replace le focus sur le premier champ de saisie. entrez un autre élément. Voici la fonction qui est liée via "keypress" à la zone de texte avec la classe "description".

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(); 
    }; 
}, 

Le problème que j'ai est que lorsque l'utilisateur charge d'abord la page du textarea est vide, mais après que l'utilisateur entre dans le premier article et presses entrer dans la zone de texte apparaît vide, mais contient en fait maintenant un saut de ligne . Cela signifie que lorsque l'utilisateur arrive de nouveau à la zone de texte pour le second et tous les futurs éléments, le point d'insertion est placé dans la deuxième ligne de la zone de texte au lieu de la première et lorsque l'utilisateur clique sur Entrée pour enregistrer ces éléments supplémentaires. avec un caractère novateur de premier plan. J'ai compris que cela se produisait parce que je capture la touche "enter" et que la touche enter ne déclenche pas seulement mon instruction if, mais ajoute cette nouvelle ligne après l'exécution de l'instruction if. J'ai compris cela parce que j'ai essayé de relier à "keydown" et la prochaine fois autour de la textarea n'a pas eu cet espace supplémentaire, mais cela a introduit un autre problème. Maintenant qu'il est lié à "keydown", cela signifie que la commande "enter" est envoyée au premier champ de saisie, ce qui fait que le focus passe au second champ de saisie. Ensuite j'ai essayé de le lier à "keyup" et le "enter" dans l'entrée de la classe "price" déclenche maintenant le createOnEnter provoquant la création de l'item sans permettre à l'utilisateur d'entrer quoi que ce soit dans la zone de texte.

Résumé:

= keypress nouvelle ligne supplémentaire dans textarea après compensation avec .val ('')

keydown = événement enter "nextFieldOnEnter" sur l'entrée en classe "nom" est déclenchée et mise au point est donné entrer avec la classe "prix"

keyup = entrer l'événement du prix déclenche "createOnEnter" lié à la zone de texte. Quelqu'un at-il des idées sur la façon dont je peux effacer la zone de texte sans ces problèmes parce que je saisis la touche "Entrée" pour faire avancer les champs et enregistrer l'élément?

Je sais que je pourrais .remove() la nouvelle ligne principale pour le deuxième et tous les éléments supplémentaires avant d'enregistrer, mais cela signifie que l'utilisateur serait toujours présenté avec le point d'insertion sur la deuxième ligne pour chaque élément supplémentaire.

Answer 1

Le comportement par défaut de la touche Entrée dans un textarea consiste à ajouter une nouvelle ligne. Vous devez empêcher cette action se produisant dans la méthode createOnEnter, ajouter e.preventDefault(); après avoir apparié la touche en tant que touche Entrée.

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