Invio di dati da textarea premendo "Invio"

Question

Ho una pagina Web dinamica con JS. C'è uno area di testo e un Invia pulsante, ma non modulo tag. Come faccio Invia pulsante di fuoco e la textarea ottenere eliminato quando Enter viene premuto nel textarea?

Answer 1

È possibile utilizzare un gestore keyup per l'area di testo (sebbene io sconsiglierei di farlo *).

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

* Perché non utilizzare un campo di immissione testo per questo? Textarea è particolarmente adatto per input multilinea, un campo di immissione testo per input a linea singola. Con un gestore di inserimento si cripta l'input multilinea. Ricordo di averlo usato una sola volta per un'applicazione di chat XHR (aka AJAX) (quindi la textarea si comportava come un'area di input per MSN), ma ha riattivato l'input multiline usando il tasto di invio CTRL per le nuove linee. Potrebbe essere un'idea per te? L'ascoltatore sarebbe estesa in questo modo:

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

Answer 2

Colpire Inserire in un textarea inserisce un'interruzione di riga, anziché inviare il modulo principale; questo non funzionerebbe in quel modo anche con tag regolari.

Sarebbe inopportuno tentare di aggirare questo comportamento, in quanto violerebbe le aspettative dell'utente su come si comportano i controlli dell'area di testo, sia in altri siti Web, sia in altre applicazioni sulla loro piattaforma.

Answer 3

Ecco la mia soluzione:

in 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);} 

in HTML:

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

Answer 4

@ Shog9 mi ha suggerito di copiare il mio rispondi a una versione duplicata di questa domanda: Un problema che ignora è l'esecuzione degli utenti metodo di input (editor) - es. immissione di testo non latina. L'IME con cui ho familiarità è il Kotoeri Hiragana IM su OSX, ma ce ne sono molti altri sia per il giapponese (Kotoeri da solo ha diverse modalità di input, e ce n'è almeno un'altra importante chiamata ATOK), oltre alle modalità per hangul, cinese tradizionale e semplificato, nonché numerose altre lingue meno conosciute. E questi metodi di input esistono su tutte le principali piattaforme (specialmente Win, Mac e Linux).

Il problema che introducono dal punto di vista del codice simile a quello che si sta tentando è che l'esatta pressione fisica del tasto non corrisponde necessariamente all'ingresso effettivo che l'utente sta inserendo.

Per esempio digitando la sequenza di caratteri toukyou<enter> sotto hiragana di default produrrà la stringa とうきょう, notare che non v'è <enter> nel testo risultante poiché immettere conferma il testo composto. Ma oltre a questo l'effettiva sequenza di caratteri che appare cambia come l'ingresso è digitato:

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

Se la memoria non serve quando ho implementato questo in WebKit è stato necessario per rendere la keyCode essere 229 su keyDown per tutti i tasti digitati in un IME (per compat con IE) - ma non riesco a ricordare quale sia il comportamento di keyUp.

Vale anche la pena notare che in alcuni IME non si riceveranno necessariamente keydown, keypress o keyup. O riceverai più. Oppure vengono inviati tutti insieme alla fine dell'input.

In generale questa è una parte molto ... sporca ... delle implementazioni degli eventi DOM al momento.

Answer 5

L'area di testo consente agli utenti di immettere più righe di testo in modo che premendo Invio venga inserita solo una nuova riga nel testo. Utilizzare invece il campo di testo normale se si desidera tale comportamento

Answer 6

È possibile che non si utilizzi un wrapper di moduli?

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