Я хотів би дізнатись, яку клавішу символів натискають у перехресному браузері сумісним способом у чистому Javascript.
event.key
безпосередньо дасть вам притиснуту
Я хотів би дізнатись, яку клавішу символів натискають у перехресному браузері сумісним способом у чистому Javascript.
event.key
безпосередньо дасть вам притиснуту
Відповіді:
"Очистити" JavaScript:
<script type="text/javascript">
function myKeyPress(e){
var keynum;
if(window.event) { // IE
keynum = e.keyCode;
} else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
alert(String.fromCharCode(keynum));
}
</script>
<form>
<input type="text" onkeypress="return myKeyPress(event)" />
</form>
JQuery:
$(document).keypress(function(event){
alert(String.fromCharCode(event.which));
});
keypress
події, яка надає вам код символу, а не keyup
або keydown
який дає вам код ключа.
e.key
досі не має повної підтримки браузера.
Тут є мільйон дублікатів цього питання, але все одно знову:
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
var charStr = String.fromCharCode(charCode);
alert(charStr);
};
Найкраще посилання на ключові події, які я бачив, - http://unixpapa.com/js/key.html .
Більш свіжі та набагато чистіші: використання event.key
. Більше немає довільних кодів номерів!
ПРИМІТКА. Старі властивості (
.keyCode
і.which
) застаріли.
node.addEventListener('keydown', function(event) {
const key = event.key; // "a", "1", "Shift", etc.
});
Якщо ви хочете переконатися, що введені лише окремі символи, перевірте key.length === 1
, чи це один із символів, який ви очікуєте.
Спробуйте:
<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
//tested in IE/Chrome/Firefox
document.getElementById("key").innerHTML = e.key;
document.getElementById("keyCode").innerHTML = e.keyCode;
document.getElementById("eventCode").innerHTML = e.code;
})
</script>
* Примітка. Це працює в "Запустити фрагмент коду"
Цей веб-сайт робить те саме, що і мій код вище: Keycode.info
**check this out**
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).keypress(function(e)
{
var keynum;
if(window.event)
{ // IE
keynum = e.keyCode;
}
else if(e.which)
{
// Netscape/Firefox/Opera
keynum = e.which;
}
alert(String.fromCharCode(keynum));
var unicode=e.keyCode? e.keyCode : e.charCode;
alert(unicode);
});
});
</script>
</head>
<body>
<input type="text"></input>
</body>
</html>
Однією з моїх улюблених бібліотек, які роблять це витончено, - Мишоловка .
Він оснащений різноманітними плагінами, одним з яких є record
плагін, який може ідентифікувати послідовність натискання клавіш.
Приклад:
<script>
function recordSequence() {
Mousetrap.record(function(sequence) {
// sequence is an array like ['ctrl+k', 'c']
alert('You pressed: ' + sequence.join(' '));
});
}
</script>
<button onclick="recordSequence()">Record</button>