Làm cách nào để xử lý thao tác nhấn Enter bằng giao diện người dùng Web Dart?

Question

Tôi muốn khai báo một cách dễ dàng khi nhấn phím ENTER trong trường nhập, với giao diện người dùng Web của Dart? Tôi chỉ muốn chạy một phương thức nếu ENTER được nhấn và tôi không quan tâm đến bất kỳ khóa nào khác.

Làm cách nào để thực hiện việc này?

Answer 1

Tóm tắt

gói Web UI Dart của khai báo có thể đăng ký xử lý cho các sự kiện khác nhau, như nhấp chuột và KeyUp. Sự kiện keyUp sẽ kích hoạt mọi sự kiện trên bàn phím. Để lọc những sự kiện đó và chỉ để nghe các khóa cụ thể, bạn cần xem xét thuộc tính keyCode. May mắn thay, Dart có một lớp tiện lợi để chuẩn hóa mã phím trên các trình duyệt. Bạn có thể sử dụng tất cả điều này bên trong thuộc tính ràng buộc khai báo của bạn. Đọc để tìm hiểu làm thế nào!

Lắng nghe để ép chính

Lớp InputElement có một dòng các sự kiện cho sự kiện KeyUp, gọi onKeyUp (docs). Luồng onKeyUp phát ra các trường hợp KeyboardEvent (doc).

final Stream<KeyboardEvent> onKeyUp; 

Cũ 'n Busted

Các KeyboardEvent cung cấp một accessor keyCode mà trả về một hệ thống mã khóa cụ thể. Thật không may, một số hệ thống có mã khóa khác nhau cho cùng một khóa ngữ nghĩa. May mắn thay, Dart đã sửa chữa!

New Hotness

Sử dụng KeyEvent.wrap(KeyboardEvent parent) (doc) để bắt chước KeyEvent và bình thường hóa mã chủ chốt khó hiểu!

new KeyEvent.wrap(keyboardEvent) 

Bây giờ bạn có một thể hiện của KeyEvent, bạn có thể truy vấn của nó keyCode cho một cái nhìn hợp lý vào những gì quan trọng được nhấn. Bộ thu thập keyCode trả về một số int, nhưng bạn có thể so sánh điều đó với danh sách các khóa từ lớp KeyCode (doc).

var keyEvent = new KeyEvent.wrap(keyboardEvent); 
if (keyEvent.keyCode == KeyCode.ENTER) { 
    // enter was pressed 
} 

Cross-trình duyệt ép chính FTW

Các KeyEvent và KeyCode lớp giúp bình thường hóa mã chủ chốt trên hệ thống và trình duyệt, do đó bạn không cần phải lo lắng về sự không tương thích khác nhau.

Với giao diện người dùng Web

UI Web cho phép bạn khai báo đăng ký xử lý sự kiện. Bạn có thể nghe các sự kiện quan trọng và kiểm tra xem phím enter đã được nhấn chưa. Dưới đây là một ví dụ:

<input type="text" id="new-todo" on-key-up="if (new KeyEvent($event).keyCode == KeyCode.ENTER) createNewTodo()"> 

Chú ý cách on-key-up đăng ký câu lệnh if, trong đó sử dụng KeyEvent và KeyCode để bình thường hóa các mã chủ chốt.Phương thức createNewTodo chỉ được gọi khi nhấn phím enter.

Ta da!

Answer 2

Không phải giao diện người dùng web, nhưng đây là một cách khác để nghe và sử dụng đầu vào bàn phím.

1) Nghe cho báo chí chính:

void main() { 
    ...  
    input.onKeyPress.listen(handleKeyEvent);  
    ... 
} 

2) Chuyển đổi KeyboardEvent dẫn đến một KeyEvent sử dụng KeyEvent.wrap (KeyboardEvent) constructor. Sau đó, bạn có thể thực hiện như trên bằng cách so sánh KeyEvent.keyCode với KeyCode.Enter:

void handleKeyEvent(KeyboardEvent event) { 
    KeyEvent keyEvent = new KeyEvent.wrap(event); 
    if (keyEvent.keyCode == KeyCode.ENTER) { 
    handleInput();  
    } 
}