2013-01-21 26 views
5

Tôi đã có này trong tập tin html của tôi:Đáp ứng ngay lập tức với những thay đổi trong textarea Dart

<textarea id="inputbox" placeholder="type here"></textarea> 

cách chính xác để dây lên một handler mà sẽ cháy ngay lập tức bất cứ khi nào nội dung của những thay đổi textarea là gì? (Cho dù bằng bàn phím, chuột/clipboard, đầu vào bài phát biểu, đọc sóng não, vv)

tôi đã cố gắng:

query("#inputbox").on.change.add(handler) 

nhưng (ít nhất là trên Dartium) nó chỉ cháy sau khi bạn tab ra khỏi lĩnh vực này.

Mục đích là cập nhật cửa sổ "xem trước trực tiếp", tương tự như cách Stackoverflow hiển thị kết quả Đánh dấu khi bạn nhập.

Trả lời

8

Đây là điều tốt nhất tôi đã đưa ra cho đến thời điểm này. Tôi rất vui khi được nghe nếu có ai biết về một giải pháp thay thế nhỏ gọn hoặc thích hợp hơn.

Chỉnh sửa: Đoạn mã được cập nhật thành new pattern để đăng ký sự kiện.

import 'dart:html'; 

void main() { 
    query("#inputbox") 
    ..onChange.listen(handler) 
    ..onKeyDown.listen(handler) 
    ..onKeyUp.listen(handler) 
    ..onCut.listen(handler) 
    ..onPaste.listen(handler); 
} 

void handler(Event event) { 
    print((query("#inputbox") as TextAreaElement).value); 
} 

Hành vi chính xác sẽ khác nhau giữa các trình duyệt và hệ điều hành.

Bạn có thể bỏ qua keyDown, nhưng lưu ý keyDownKeyUp hành vi bị ảnh hưởng bởi hệ điều hành và isn't guaranteed to be symmetric. Bạn có thể tưởng tượng bỏ lỡ thay đổi, ít nhất là cho đến khi sự kiện keyUp hoặc thay đổi tiếp theo được kích hoạt. Thật vậy, tôi đã chứng minh điều này bằng cách tạo một ứng dụng nhỏ trên Windows 7 để gửi một tin nhắn WM_KEYDOWN mồ côi đến Dartium và IE9.

keyPress có thể được sử dụng thay cho KeyUpkeyDown, nhưng won't generate events cho các phím nhất định như backspace và xóa.

cutpaste phản ứng ngay lập tức với việc cắt hoặc dán được thực hiện bằng chuột. Nếu bạn không sử dụng chúng, sự kiện change sẽ ghi lại thay đổi, nhưng không phải cho đến sau khi trường mất tiêu điểm hoặc sometimes even later.

Sự kiện input có thể thay thế tất cả người nghe ở trên và dường như hoạt động tốt ở Dartium, nhưng trong IE9, nó chỉ chụp các tính năng bổ sung nhân vật chứ không phải xóa.

Lưu ý keyUpkeyDown có thể tạo thêm các sự kiện không mong muốn cho các phím con trỏ, nhà riêng, kết thúc, ca, v.v. (ví dụ: Trong IE9). Nó sẽ phát ra ngoài các trình nghe cắt/dán khi người dùng sử dụng các phím tắt cho những hành động đó.

Mặc dù câu hỏi dành riêng cho Dart, nhiều cuộc thảo luận ở trên áp dụng cho bất kỳ mã nào nghe DOM. Thậm chí mã khóa giá trị aren't standardized trên các trình duyệt (more detail).

Cũng có thể đáng để kiểm tra lớp học KeyboardEventController, mặc dù lớn và lớn khi tôi kiểm tra hành vi trường hợp cạnh tương tự như đã nêu ở trên. Điều đó có thể hoặc có thể không được thiết kế.Các nhà phát triển Dart thực hiện một số nỗ lực để insulate you từ sự không nhất quán giữa các trình duyệt, nhưng nó vẫn là một công việc đang được tiến hành.

Đồng thời, trong khi chúng tôi đang nói về textarea, hãy nhớ sử dụng thuộc tính value, not its text property. Cuối cùng, hãy đảm bảo rằng bạn handler điều chỉnh phản ứng của mình thành "bùng nổ" hoạt động bàn phím (ví dụ: một số loại bộ đếm thời gian sẽ giảm tốc độ xử lý của bạn và cuộn lên bất kỳ sự kiện bổ sung nào xảy ra trong thời gian chờ đợi).

câu hỏi liên quan và các liên kết:

2

Nó không rõ ràng nếu bạn đang sử dụng polymer hay không, nhưng nếu bạn đang có, bạn có thể đăng ký thay đổi một biến có chú thích với @observable bằng cách tạo một hàm trong phần tử polymer dưới dạng [tên biến] Thay đổi (oldvalue). Ban đầu tôi tìm thấy thông tin này tại đây: How to subscribe to change of an observable field

Các vấn đề liên quan