Enviar datos desde el área de texto presionando "Enter"

Question

Tengo una página web dinámica con JS. Hay un textarea y un botón Enviar, pero no forma etiquetas. ¿Cómo hago que me envíen botón de disparo y el área de texto ser anulado cuando Introduzca se presiona en el área de texto ?

Answer 1

Puede utilizar un controlador de teclado para el área de texto (aunque desaconsejaría *).

[SomeTextarea].onkeyup = function(e){ 
    e = e || event; 
    if (e.keyCode === 13) { 
    // start your submit function 
    } 
    return true; 
} 

* ¿Por qué no utilizar un campo de entrada de texto para esto? Textarea es especialmente adecuado para la entrada de líneas múltiples, un campo de entrada de texto para la entrada de una sola línea. Con un manejador de enter, criplica la entrada de líneas múltiples. Recuerdo usarlo una vez para una aplicación de chat XHR (también conocida como AJAX) (por lo que el área de texto se comportó como un área de entrada MSN), pero volví a habilitar la entrada de línea múltiple con la tecla CTRL-intro para líneas nuevas. Puede ser que sea una idea para ti? El oyente se extendería como esto:

[SomeTextarea].onkeyup = function(e){ 
    e = e || event; 
    if (e.keyCode === 13 && !e.ctrlKey) { 
    // start your submit function 
    } 
    return true; 
} 

Answer 2

Al pulsar Intro en textarea inserta un salto de línea, en lugar de enviar el formulario principal; esto no funcionaría de esa manera incluso con etiquetas de formulario regulares.

No sería aconsejable evitar este comportamiento, ya que violaría las expectativas del usuario sobre el comportamiento de los controles de área de texto, tanto en otros sitios web como en otras aplicaciones de su plataforma.

Answer 3

aquí está mi solución:

en javascript:

function isEnterPressed(e){ 
var keycode=null; 
if (e!=null){ 
    if (window.event!=undefined){ 
     if (window.event.keyCode) keycode = window.event.keyCode; 
     else if (window.event.charCode) keycode = window.event.charCode; 
    }else{ 
     keycode = e.keyCode; 
    } 
} 
return (keycode == 13);} 

en HTML:

<input type="text" onkeyup="if(isEnterPressed(event)){/*do something*/}" /> 

Answer 4

@ Shog9 sugirió que copio mi respuesta a una versión duplicada de esta pregunta: Un problema que esto ignora es que los usuarios corren método de entrada de ningun (editores) - ej. entrada de texto no latina El IME con el que estoy familiarizado es el Kotoeri Hiragana IM en OSX, pero hay muchos otros tanto para japonés (Kotoeri solo tiene múltiples modos de entrada diferentes, y hay al menos otro más importante llamado ATOK), además de modos para Hangul, chino tradicional y simplificado, así como muchos otros idiomas menos conocidos. Y estos métodos de entrada existen en todas las plataformas principales (especialmente Win, Mac y Linux).

El problema que introducen desde el punto de vista del código similar al que está intentando es que las teclas físicas exactas no se corresponden necesariamente con la entrada real que ingresa el usuario.

Por ejemplo escribiendo la secuencia de caracteres toukyou<enter> bajo hiragana por defecto producirá la cadena とうきょう, tenga en cuenta que no hay <enter> en el texto resultante porque entrar confirma el texto compuesto. Pero además de esto la secuencia real de caracteres que aparece cambios como la entrada se escribe:

t // t 
と // to 
とう // tou 
とうk // touk 
とうky // touky 
とうきょ // toukyo 
とうきょう // toukyou 

Si falla la memoria cuando he implementado esto en WebKit que era necesario hacer el código clave sea 229 en keyDown para todas las llaves mecanografiadas en un IME (para compat con IE), pero no recuerdo cuál es el comportamiento de keyUp.

También vale la pena señalar que en algunos IME no necesariamente recibirá keydowns, keypress o keyup. O recibirás múltiples. O todos se envían juntos al final de la entrada.

En general, esta es una parte muy ... sucia ... de las implementaciones de eventos DOM actualmente.

Answer 5

El área de texto es para permitir a los usuarios ingresar varias líneas de texto, por lo que presionar enter solo insertaría una nueva línea en el texto. Use el campo de texto normal en su lugar si desea ese comportamiento

Answer 6

¿Hay alguna razón por la que no esté utilizando un contenedor de formularios?

$('#input_id').keypress(function(e){ 
    if(e.which == 13){ 
     $('#form_id').submit(); 
     return false; //prevent duplicate submission 
    } 
});