JS властивість Event.charCode

Загальний опис

charCode — це властивість об'єкта KeyboardEvent, яка повертає ASCII-код символа, що відповідає натиснутій клавіші на клавіатурі. Властивість використовується для обробки подій клавіатури, коли важливо знати, який саме символ ввів користувач. Вона повертає значення у вигляді цілого числа, що відповідає ASCII-коду введеного символа.

Це працює лише з подіями keypress і може бути застарілим в деяких сучасних браузерах, тому інколи рекомендується використовувати альтернативу - event.key або event.code. Важливо пам'ятати, що charCode повертає код тільки для символів, які можуть бути надруковані, таких як літери, цифри, знаки пунктуації. Наприклад, для натискання клавіші "A" повернеться код 65, який є ASCII-кодом для цього символа.

При використанні цієї властивості треба створити слухач події клавіатури, щоб отримати потрібний код. Далі, значення можна використовувати для різних цілей, як-от перевірка введених символів чи створення інтерактивних застосунків.

document.addEventListener('keypress', function(event) {
    console.log(event.charCode); // Виведе ASCII-код символа
});

Важливо відзначити, що charCode працює лише для символів, що відображаються. Інші клавіші, як-от стрілки або функціональні клавіші (наприклад, F1), не мають ASCII-кодів і не будуть оброблені через charCode. Для обробки таких випадків зручно поєднувати charCode з іншими властивостями KeyboardEvent, як-от key або code.

правити

Порада

Значення, яке повертається charCode, залежить від регістру натиснутої клавіші. Для символу "A" і "a" повернеться різний код (65 і 97 відповідно). Використовуйте .toUpperCase() або .toLowerCase() для нормалізації введених значень.

автор: Bond правити

Порада

Коли обробляєте введення, наприклад, обмежуючи допустимі символи, використовуйте комбінацію charCode і preventDefault() для блокування небажаних символів. Це допоможе створити кастомні інтерфейси для введення тексту.

автор: Bond правити

Порада

Враховуйте, що charCode повертає код символа, який може бути залежним від розкладки клавіатури. Тому для мультикультурних проєктів або додатків, де використовується декілька мов, необхідно додатково тестувати коректність введених символів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.charCode

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1.2	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

document.addEventListener('keypress', function(event) {
    if (event.charCode === 13) { // Перевірка на Enter
        console.log("Натиснуто Enter");
    }
});

document.addEventListener('keypress', function(event) {
    if (event.charCode >= 65 && event.charCode <= 90) {
        console.log("Ви ввели велику літеру: " + String.fromCharCode(event.charCode));
    }
});