Phát hiện đầu vào IME trước khi nhập được nhấn trong Javascript

Question

Tôi thậm chí không chắc chắn nếu điều này là có thể, vì vậy xin lỗi nếu đó là một câu hỏi ngu ngốc.

Tôi đã thiết lập một cuộc gọi lại keyup thông qua jQuery để chạy một hàm khi người dùng nhập vào hộp nhập liệu. Nó hoạt động tốt cho tiếng Anh.

Tuy nhiên khi nhập văn bản bằng tiếng Nhật/tiếng Hàn/tiếng Trung, chức năng không được gọi cho đến khi người dùng xác nhận văn bản của họ.

Có thể phát hiện thấy họ đã bắt đầu nhập và truy cập vào văn bản chưa hoàn chỉnh của họ không?

Tôi nghĩ có lẽ đó là một điều cấp hệ điều hành nên Javascript không có quyền truy cập vào nó.

Chỉnh sửa: Tôi vừa nhận ra rằng tính năng này hoạt động trong Chrome và Safari, nhưng không có trong Firefox (chưa có cơ hội dùng thử trên Windows). Vì vậy, Chrome gọi khóa và có thể nhận được văn bản. Nhưng tôi vẫn gặp vấn đề trên trong Firefox.

Answer 1

Đây là một known issue trong Firefox và trình duyệt nào nên đang thực hiện isn't clear.

Một phương pháp có thể để giải quyết vấn đề này là demonstrated here, trong đó trường văn bản được thăm dò để thay đổi văn bản (thay vì dựa vào sự kiện).

Answer 2

Các sự kiện compositionstart, compositionupdate và compositionend sự kiện có thể hữu ích. Chúng giúp bạn phát hiện khi đầu vào IME đang được sử dụng.

Ví dụ: hãy xem xét sử dụng IME để nhập か (ka) bằng tiếng Nhật.
Các sự kiện sau đây (theo thứ tự hiển thị) sẽ bị sa thải:

• k (IME có thể nhìn thấy) KeyDown, compositionstart, compositionupdate, compositionend, đầu vào
• một (IME hiển thị), compositionstart, compositionupdate, composit ionend, đầu vào
• nhập (IME đóng) KeyDown, đầu vào Thông báo

rằng các sự kiện compositon chỉ được kích hoạt khi IME được hiển thị (trước nhập được nhấn). Cũng lưu ý rằng sự kiện nhấn phím không được kích hoạt. Điều này chỉ được kích hoạt cho đầu vào không phải IME.

Để truy cập văn bản chưa hoàn thành của người dùng, bạn có thể sử dụng thuộc tính data của sự kiện.

$('#input').on('compositionupdate', function(e) { 
    console.log(e.data); 
}); 

Để biết thêm thông thấy MDN: compositionstart, compositionupdate, compositionend, InputEvent.