web-dev-qa-db-ja.com

Meteorでの入力テキスト戻りイベント

ユーザーがフォームに入力しているときにtype="text"の入力でEnterキーを押したイベントをキャプチャしたいと思います。これはウェブ全体で行われていますが、答えは私にはわかりません。

これは私がこれまでに持っているものです：

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
    }
  };
meteor
20
chet

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

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;
};
6
Danial Namousi

event.currentTarget.valueを使用することもできます

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

このjs関数を1回使用して、テキストフィールドのリターンキーを使用してフォームデータを送信するユーザーを抑制しました。おそらく、キャプチャに合わせて変更できますか？

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;
1
Leke