CODEWITHSUNDEEP
meteor
chet
chet

Reputation: 317

input text return event in Meteor

I want to capture the event of a user pressing enter on an input of type="text" when they are filling out a form. This is done all over the web, yet the answer eludes me.

This is what I have so far:

In the html file, I have a text input like so:

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

In the Javascript file, I am trying to capture the the user pressing enter to effectively submit the form. I am then grabbing the text from the input and going to stash it in the database:

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

Upvotes: 20

Views: 15563

Answers (4)

Kai
Kai

Reputation: 417

You can also use event.currentTarget.value

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

Upvotes: 1

Andreas
Andreas

Reputation: 1622

The submit event is emitted from forms, not single input elements.

The built in event map for meteor is documented here: http://docs.meteor.com/#eventmaps.

You'll have to listen for a keyboard event (keydown, keypress, keyup). Within the event handler, check, if it's the return/enter key (Keycode 13), and proceed on success.

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

Upvotes: 43

Danial Namousi
Danial Namousi

Reputation: 63

You could look into how this is achieved in the todos example (client/todos.js).

It uses a generic event handler for input fields (as seen below). You can browse the rest of the code for usage.

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

Upvotes: 6

Leke
Leke

Reputation: 883

I used this js function once to suppress the user using the return key in the text field to submit the form data. Perhaps you could modify it to suit the capture?

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;

Upvotes: 1

Related Questions