在Meteor中输入文本返回事件

Question

我想捕获用户在type="text"填写表单时按下输入的事件.这是在整个网络上完成的,但我的答案却没有.

这是我到目前为止:

在html文件中,我有一个像这样的文本输入:

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

在Javascript文件中,我试图捕获用户按Enter以有效地提交表单.然后我从输入中获取文本并将其存储在数据库中:

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

Answer 1

该submit事件是由形式,而不是单个输入元件发射.

此处记录了meteor的内置事件映射:http://docs.meteor.com/#eventmaps.

你将不得不听一个键盘事件(keydown, keypress, keyup).在事件处理程序中,检查是否为return/enter键(Keycode 13),然后继续成功.

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

Answer 2

您可以在todos示例(client/todos.js)中查看如何实现这一点.

它为输入字段使用通用事件处理程序(如下所示).您可以浏览其余代码以供使用.

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