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

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

在Meteor中输入文本返回事件

4 个答案: