2010-11-16 25 views
11

Sadece basılmış olan anahtarın, muhtemelen aksanlı, sayı, boşluk, noktalama işareti ve benzeri, yazdırılamayan bir anahtar gibi yazdırılabilir bir anahtar olup olmadığını algılamalıyım. ENTER, SEKME veya SİLME.Yazdırılabilir yazdırılabilir anahtarları algılama

Javascript'te, yazdırılamayan tüm anahtarları listelemenin haricinde bunu yapmak için güvenilir bir yol var mıdır?

cevap

15

Dün bir similar question numaralı telefonu yanıtladım. Karakterle ilgili herhangi bir şey için keypress olayını kullanmanız gerektiğini unutmayın; keydown yapmaz.

Bu arada, Girin yazılabilir olduğunu iddia edebilirim, bu arada, ve bu işlev olduğunu düşünür. Eğer kabul etmiyorsanız, Neyse ki 13.

function isCharacterKeyPress(evt) { 
    if (typeof evt.which == "undefined") { 
     // This is IE, which only fires keypress events for printable keys 
     return true; 
    } else if (typeof evt.which == "number" && evt.which > 0) { 
     // In other browsers except old versions of WebKit, evt.which is 
     // only greater than zero if the keypress is a printable key. 
     // We need to filter out backspace and ctrl/alt/meta key combinations 
     return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8; 
    } 
    return false; 
} 

var input = document.getElementById("your_input_id"); 
input.onkeypress = function(evt) { 
    evt = evt || window.event; 

    if (isCharacterKeyPress(evt)) { 
     // Do your stuff here 
     alert("Character!"); 
    } 
}); 
+0

MDN, standart olmayan ve uyumsuzluklar olabileceğinden, 'window.event 'özelliğini kullanmamamızı önerir ([link] (https://developer.mozilla.org/en-US/docs/Web/ API/Pencere/etkinlik). Bunun hakkında herhangi bir görüş var mı? – Segmentation

+1

@ Bölümlendirme: Kesinlikle katılıyorum. Bunu sadece, şu an olduğundan daha fazla endişe duyulan IE <= 8 ile uyumluluk için kullanıyorum. 'window.event' sadece bu hatada eski IE'de kullanılacaktır, çünkü olay nesnesi tüm modern tarayıcılarda olay işleyicisine aktarılacaktır. –

15

etkinlik kümesinin which veya keyCode özelliğiyle basılmasını filtrelemek için bunu düzeltebilirler, bu görev modern tarayıcılarda çok daha kolaydır. Artık yazdırılabilir bir anahtarı uzunluğunu tespit etmek için KeyboardEvent.key kullanabilirsiniz.

test.onkeydown = e => { 
 
    let isPrintableKey = e.key.length === 1; 
 
    alert(`Key '${e.key}' is printable: ${isPrintableKey}`); 
 
}
<input id="test">

Bunun yanı sıra, aynı zamanda bu yöntem çok daha güvenilirdir vs. Enter, Delete, Backspace, Tab,

gibi, listeden başka anahtarları algılayabilir çünkü event.which'dan farklı olarak, event.key zaten standartlaştırılmıştır.

+0

Eski tarayıcılarda bu durumun tam anlamıyla çökeceğine dikkat edilmelidir, çünkü 'e.key' tanımsızdır. 'E.key && e.key.length === 1' kontrol etmek daha güvenli. Hatta 2018 numaralı anonim, 'anahtar' için küresel destek yalnızca% 80'dir: https://caniuse.com/#feat=keyboardevent-key – Thomas

İlgili konular