Nhận nhân vật chính xác trên sự kiện bàn phím

Question

Tôi đang tạo một trò chơi chữ nhỏ, nơi tôi cần lấy thẻ cuối cùng mà người dùng nhập vào bàn phím của họ. Tôi đã tìm ra hai cách để làm điều này.

Đầu tiên là lấy từng char bằng cách nghe sự kiện bàn phím tài liệu và nhận bằng phím mã. Nó hoạt động rất tốt cho đến khi tôi bắt đầu viết các ký tự bằng các phím chết bàn phím (như Ā). String.fromCharCode (e.keyCode) dịch nó thành A như mã khóa là cho A, nhưng dường như không có gì trên sự kiện liên quan đến khóa chết hoặc char thực sự mà sự kiện được tạo ra.

Thứ hai là giữ một đầu vào ẩn luôn tập trung (xấu) và trên bàn phím sự kiện nhận được giá trị cuối cùng của giá trị đầu vào, nhưng điều này chỉ hoạt động nếu tôi viết khá chậm. Mã của tôi trông như thế này: ví dụ

function is_char(e){ 
    return (!e.ctrlKey && !e.altKey && !e.metaKey && 
         (e.keyCode >= 65 && e.keyCode <= 90) || 
         (e.keyCode >= 97 && e.keyCode <= 122) 
       ); 
} 
$('#fake_input').on('keyup', function(e){ 
    if (is_char(e)){ 
    $('#result').append(this.value[this.value.length - 1]); 
    } 
}).focus(); 

đây đang làm việc - http://jsfiddle.net/YkaBm/1/ - bạn sẽ nhận được cùng một từ dưới đầu vào, nhưng khi bạn viết một chút nhanh hơn nó quay ra sai.

Bạn có một số đề xuất về cách lấy ký tự thực (đúng) trên sự kiện bàn phím hay tại sao sự kiện khóa đầu vào hoạt động như thế này?

Cập nhật!

Như tôi đã đề cập trong ý kiến ​​trả lời semir.babajic đã không hoàn toàn làm việc đối với trường hợp của tôi, nhưng nhờ Semir tôi thấy rằng giải pháp ngớ ngẩn này hoạt động:

function is_char(e){ 
    return (!e.ctrlKey && !e.altKey && !e.metaKey && 
         (e.keyCode >= 65 && e.keyCode <= 90) || 
         (e.keyCode >= 97 && e.keyCode <= 122) 
       ); 
} 
var x = 0; 
$('#fake_input').on('keyup', function(e){ 
    if (e.keyCode === 8){ 
    x--; 
    } 
    else if (is_char(e)){ 
    x++; 
    $('#result').append(this.value[x-1]); 
    } 
}).focus(); 

tôi vẫn rất thích tìm một cách để có được nhân vật thực sự từ sự kiện bàn phím sử dụng bất kỳ sự kiện bàn phím $ (tài liệu) nào, vì việc giữ đầu vào tập trung dường như không phải là một giải pháp tốt.

Cập nhật 2!

Chỉ trong trường hợp ai gặp vấn đề tương tự, tôi thấy giải pháp này là tốt nhất:

App.insert_char = function(c){ 
    if (c && c.toUpperCase() != c.toLowerCase()){ 
     console.log(c); 
    } 
}; 

if ('oninput' in $('#fake_input')[0]){ 
    $('#fake_input').on('input', function(e){ 
     App.insert_char(this.value[this.value.length - 1]); 
    }); 
} 
else if ('onpropertychange' in $('#fake_input')[0]){ 
    $('#fake_input').on('propertychange', function(e){ 
     App.insert_char(this.value[this.value.length - 1]); 
    }); 
} 
else if ('ontextInput' in $('#fake_input')[0]){ 
    $('#fake_input').on('textInput', function(e){ 
     App.insert_char(this.value[this.value.length - 1]); 
    }); 
} 

Answer 1

Dòng này đã gây ra một "nút cổ chai": this.value[this.value.length - 1], nó chỉ đơn giản là chậm.

Hãy thử này để thay thế:

Cập nhật:

$('#fake_input').keypress(function(e){ 
    $('#result').append(String.fromCharCode(e.which) + '<br />'); 
}).focus(); 

Giải thích. Tôi giả sử bạn muốn sử dụng keypress thay vì keyup để bẫy ký tự. Lưu ý rằng keyup không có gì để làm với các ký tự. Nó chỉ cho bạn biết mã khóa của tín hiệu bàn phím mà nó nhận được. Với keypress, bạn có thể xác định trường hợp vì bạn nhận được mã khóa cho ký tự.

http://jsfiddle.net/YkaBm/8/

Kính trọng.