meteor - Meteor中的输入文本返回事件

Question

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

这是我到目前为止所拥有的：

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

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

在 Javascript 文件中，我试图捕捉用户按下回车键以有效提交表单。然后我从输入中获取文本并将其存储在数据库中：

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

Answer 1

该submit事件是从表单发出的，而不是单个输入元素。

流星的内置事件地图记录在这里：http ://docs.meteor.com/#eventmaps 。

您必须监听键盘事件 ( keydown, keypress, keyup)。在事件处理程序中，检查它是否是返回/输入键（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;
};

Answer 3

我曾经使用过这个js函数来抑制用户使用文本字段中的返回键来提交表单数据。也许你可以修改它以适应捕获？

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 4

你也可以使用event.currentTarget.value

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