Meteor中的输入文本返回事件答案

【问题标题】：input text return event in MeteorMeteor中的输入文本返回事件
【发布时间】：2012-10-12 04:29:38
【问题描述】：

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

这是我目前所拥有的：

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

【问题讨论】：

标签： meteor

【解决方案1】：

你也可以使用event.currentTarget.value

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

【讨论】：

【解决方案2】：

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

【讨论】：

你在哪里定义template？
声明应该是：function (evt, template)。正如event map documentation 中所述，“处理程序函数接收两个参数：事件，一个包含有关事件信息的对象，以及模板，一个模板实例，用于定义处理程序的模板”。我刚刚编辑了示例代码。

【解决方案3】：

您可以在 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;
};

【讨论】：

【解决方案4】：

我曾经使用过这个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;

【讨论】：