css.in.ua
Підтримати

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() для нормалізації введених значень.
Порада:

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

Порада:

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

Синтаксис

event.charCode

Значення

Return

Переглядачі

Переглядач

1

1.5

1.2

12.1

12
Переглядач

37

18

4

1
Переглядач

-

-

Приклади


Цей код працює таким чином: коли користувач вводить символ у текстове поле, подія keypress спрацьовує та використовує event.charCode, щоб відобразити код введеного символу в реальному часі.

Тут перевіряється, чи натиснута велика літера. Це може бути корисно для спеціальних полів введення, де важливо розрізняти малі і великі літери, наприклад, при перевірці пароля або введенні спеціального коду.

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

Цей код допомагає визначити, коли користувач натискає клавішу Enter, що зручно для обробки підтвердження форми чи відправлення команди.

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

Спільнота

Зв'язок