Событие ввода текста в Метеор

Я хочу зафиксировать событие, когда пользователь нажимает enter на входе 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
    }
  };

Ответы

Ответ 1

Событие submit испускается из форм, а не из отдельных элементов ввода.

Введенная карта событий для метеора документирована здесь: 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
    }
  }
};

Ответ 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;
};

Ответ 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;

Ответ 4

Вы также можете использовать event.currentTarget.value

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