¿Cómo elimino la nueva línea adicional en textarea después de borrarla con JQuery .val()

Question

Tengo un formulario para la entrada rápida de productos. (FYI, tengo la forma establecida con mesas para que pueda alinear a la derecha las etiquetas para cada entrada.)

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

lo tengo configurado para que cuando las orejas o se pulsa ENTER en el primero en los campos de entrada, mueve al usuario al siguiente campo $ (": input"). Cuando el usuario hace clic en ingresar (código clave 13) en el último campo de entrada que es un área de texto, tengo la forma de crear el elemento en la base de datos, borro los valores de los tres campos de entrada y coloco el foco en el primer campo de entrada de nuevo en preparación para ingrese otro artículo. Aquí está la función que está vinculada a través de "keypress" al textarea con la clase "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(); 
    }; 
}, 

El problema que tengo es que cuando el usuario carga la página por primera área de texto está vacío, pero después de que el usuario entra en el primer artículo y prensas de entrar en el área de texto aparece vacío, pero en realidad ahora contiene un carácter de nueva línea . Esto significa que cuando el usuario vuelve al área de texto para el segundo y todos los elementos futuros, el punto de inserción se ubica en la segunda fila del área de texto en lugar del primero y cuando el usuario hace clic en ingresar para guardar esos elementos adicionales, se guardan con un personaje principal de nueva línea.

Descubrí que esto sucede porque estoy capturando la tecla "enter" y que la tecla enter no solo activa mi instrucción if, sino que agrega esa nueva línea después de que se ejecute la instrucción if. Me di cuenta de esto porque traté de vincularlo a "keydown" y la próxima vez en todo el área de texto no tenía ese espacio extra, sin embargo, esto introdujo otro problema. Ahora que está vinculado a "keydown" significa que el comando "enter" se está enviando al primer campo de entrada, haciendo que el foco salte al segundo campo de entrada.

Luego intenté vincularlo a "keyup" y el "enter" en la entrada de clase "price" ahora está activando createOnEnter causando que el ítem sea creado sin permitirle al usuario ingresar nada en el área de texto.

Resumen:

pulsación de tecla = salto de línea extra en área de texto después de limpiar con .val ('')

keydown = introducir evento "nextFieldOnEnter" en la entrada de la clase "nombre" se activa y se le da el foco para ingresar con el "precio" de clase

keyup = enter event from price está activando "createOnEnter" vinculado al textarea.

¿Alguien tiene alguna idea sobre cómo puedo borrar el área de texto sin esos problemas porque estoy capturando la tecla "enter" para avanzar en los campos y guardar el elemento?

Sé que puedo. Eliminar() la nueva línea principal para el segundo y todos los elementos adicionales antes de guardar, sin embargo, esto significa que el usuario aún se presentaría con el punto de inserción en la segunda línea para cada elemento adicional.

Answer 1

El comportamiento predeterminado de la tecla Intro en un textarea es agregar una nueva línea. Debe evitar que esta acción ocurra dentro del método createOnEnter, agregue e.preventDefault(); después de hacer coincidir la presión de la tecla como la tecla Intro.

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