Eingabe Text Rückkehr Ereignis in Meteor

Question

Ich möchte das Ereignis eines Benutzers erfassen, die Eingabe auf einer Eingabe von type="text", wenn sie ein Formular ausfüllen. Dies geschieht überall im Internet, doch die Antwort entzieht sich mir.

Dies ist, was ich bisher:

In der HTML-Datei, ich habe eine Texteingabe wie folgt:

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

In der Javascript-Datei, versuche ich die Taste um den Benutzer zu erfassen Geben Sie ein, um das Formular zu senden. Ich packte dann den Text aus dem Eingang und gehen sie in der Datenbank bunkern:

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

Answer 1

Das submit Ereignis wird von Formen emittiert werden, nicht einzelne Eingabeelemente.

Die eingebaute Ereigniskarte für Meteor ist hier dokumentiert: http://docs.meteor.com/#eventmaps.

Sie müssen auf eine Tastaturereignis (keydown, keypress, keyup) hören. Überprüfen Sie im Ereignishandler, ob es sich um die Return/Enter-Taste handelt (Schlüsselcode 13), und fahren Sie mit dem Erfolg fort.

Answer 2

Ich habe diese js-Funktion einmal verwendet, um den Benutzer mit dem Return-Schlüssel in das Textfeld zu unterdrücken, um die Formulardaten zu senden. Vielleicht könnten Sie es so anpassen, dass es der Aufnahme entspricht?

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

Sie könnten in schauen, wie dies in dem todos Beispiel erreicht wird (client/todos.js).

Es verwendet einen generischen Event-Handler für Eingabefelder (wie unten zu sehen). Sie können den Rest des Codes für die Verwendung durchsuchen.

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

Sie können auch event.currentTarget.value verwenden

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