input text return event in Meteor

Question

Voglio catturare l'evento di un utente premendo invio su un input di type="text" quando si compila un modulo. Questo è fatto in tutto il web, eppure la risposta mi sfugge.

Questo è quello che ho finora:

nel file HTML, ho un input di testo in questo modo:

<input type="text" size=50 class="newlink"> 

Nel file JavaScript, sto cercando di catturare l'utente preme entra per inviare effettivamente il modulo. Sto poi afferrando il testo dall'ingresso e andare a riporre nel database:

Template.newLink.events = { 
    'submit input.newLink': function() { 
     var url = template.find(".newLink").value; 
     // add to database 
    } 
    }; 

Answer 1

L'evento submit viene emesso dalle forme, e non elementi di input singoli.

La mappa eventi incorporata per la meteorica è documentata qui: http://docs.meteor.com/#eventmaps.

È necessario ascoltare un evento di tastiera (keydown, keypress, keyup). All'interno del gestore eventi, controllare, se è la chiave di invio/invio (Keycode 13), e procedere al successo.

Template.newLink.events = { 
    'keypress input.newLink': function (evt, template) { 
    if (evt.which === 13) { 
     var url = template.find(".newLink").value; 
     // add to database 
    } 
    } 
}; 

Answer 2

Ho usato questa funzione js una volta per sopprimere l'utente utilizzando la chiave di ritorno nel campo di testo per inviare i dati del modulo. Forse potresti modificarlo per adattarlo alla cattura?

function stopRKey(evt) { // Stop return key functioning in text field. 
    var evt = (evt) ? evt : ((event) ? event : null); 
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
    if ((evt.keyCode == 13) && (node.type=="text")) { return false; } 
} 
document.onkeypress = stopRKey; 

Answer 3

Si potrebbe esaminare come questo viene realizzato nel todos esempio (client/todos.js).

Utilizza un gestore di eventi generico per i campi di input (come illustrato di seguito). È possibile sfogliare il resto del codice per l'utilizzo.

////////// Helpers for in-place editing ////////// 

// Returns an event map that handles the "escape" and "return" keys and 
// "blur" events on a text input (given by selector) and interprets them 
// as "ok" or "cancel". 

var okCancelEvents = function (selector, callbacks) { 
    var ok = callbacks.ok || function() {}; 
    var cancel = callbacks.cancel || function() {}; 

    var events = {}; 
    events['keyup '+selector+', keydown '+selector+', focusout '+selector] = 
    function (evt) { 
     if (evt.type === "keydown" && evt.which === 27) { 
     // escape = cancel 
     cancel.call(this, evt); 

     } else if (evt.type === "keyup" && evt.which === 13 || 
       evt.type === "focusout") { 
     // blur/return/enter = ok/submit if non-empty 
     var value = String(evt.target.value || ""); 
     if (value) 
      ok.call(this, value, evt); 
     else 
      cancel.call(this, evt); 
     } 
    }; 

    return events; 
}; 

Answer 4

È anche possibile utilizzare event.currentTarget.value

Template.newLink.events = { 
    'keypress input.newLink': function (evt) { 
    if (evt.which === 13) { 
     var url = event.currentTarget.value; 
     // add to database 
    } 
    } 
};