sự kiện trả về văn bản đầu vào trong Meteor

Question

Tôi muốn nắm bắt sự kiện của người dùng nhấn enter trên đầu vào của type="text" khi họ điền vào biểu mẫu. Điều này được thực hiện trên tất cả các trang web, nhưng câu trả lời cho tôi biết.

Đây là những gì tôi có cho đến nay:

Trong tập tin html, tôi có một đầu vào văn bản như vậy:

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

Trong tập tin Javascript, tôi đang cố gắng để nắm bắt những người sử dụng nhấn nhập để gửi biểu mẫu một cách hiệu quả. sau đó tôi lấy văn bản từ đầu vào và sẽ cất giấu nó trong cơ sở dữ liệu:

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

Answer 1

Sự kiện submit được phát ra từ các hình thức, chứ không phải các yếu tố đầu vào duy nhất.

Bản đồ sự kiện được xây dựng cho thiên thạch được ghi lại ở đây: http://docs.meteor.com/#eventmaps.

Bạn sẽ phải nghe sự kiện bàn phím (keydown, keypress, keyup). Trong trình xử lý sự kiện, hãy kiểm tra, nếu đó là phím trả về/nhập (Mã khóa 13) và tiến hành thành công.

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

Answer 2

Tôi đã sử dụng hàm js này một lần để chặn người dùng bằng cách sử dụng phím trả về trong trường văn bản để gửi dữ liệu biểu mẫu. Có lẽ bạn có thể sửa đổi nó cho phù hợp với việc chụp?

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 3

Bạn có thể xem xét cách thực hiện điều này trong ví dụ todos (client/todos.js).

Nó sử dụng trình xử lý sự kiện chung cho các trường nhập (như được thấy bên dưới). Bạn có thể duyệt phần còn lại của mã để sử dụng.

////////// 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 4

Bạn cũng có thể sử dụng event.currentTarget.value

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