html подія onkeypress
Подія keypress виникає відразу після keydown, якщо натиснута символьна клавіша, тобто натискання призводить до появи символу.
Подія keypress дозволяє отримати код символу . На відміну від скан-коду, він специфічний саме для символу і різний для z і я.
Код символу зберігається у властивостях: charCode і which. Тут є багато крос-браузерних несумісностей, розбиратися з якими немає ніякого сенсу - запам'ятати складно, а на практиці потрібна лише одна «правильна» функція, що дозволяє отримати код всюди.
- Порада
-
Порядок подій, пов'язаних з подію onkeypress:
- onkeydown
- onkeypress
- onkeyup
- Порада
-
Подія onkeypress не спрацювує у різних браузерах для деяких клавіш (наприклад: ALT, CTRL, SHIFT, ESC). Тому, якщо вам потрібно зловити ці клавіші, використовуйте подію - onkeydown, в неї такої проблеми немає.
автор: с3с - Нотатка
-
Поява символу можна запобігти, якщо скасувати дію браузера на
keydown/keypress:<input onkeydown="return false" type="text" size="30">
автор: с3с<input onkeypress="return false" type="text" size="30">
Синтаксис
<element onkeypress="script">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4.0+ | 3.0+ | 1.0+ | 3.5+ | 12+ | 9.0+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2.3+ | 75+ | 67+ | 5+ |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад використання HTML події onkeydown,onkeypress,onkeyup
HTML
<input type="text" placeholder="Кнопки нажимати тут" id="kinput" onkeydown="f()" onkeypress="f1()" onkeyup="f2()"><br>
<textarea id="area"></textarea>CSS
#kinput {
font-size: 150%;
box-sizing: border-box;
width: 95%;
}
#area {
width: 95%;
box-sizing: border-box;
height: 250px;
border: 1px solid black;
display: block;
}JS
var kinput = document.getElementById('kinput');
var area = document.getElementById('area');
function f() {
area.value += "onkeydown значення value " + kinput.value + "\n";
area.scrollTop = area.scrollHeight;
}
function f1() {
area.value += "onkypress значення value " + kinput.value + "\n";
area.scrollTop = area.scrollHeight;
}
function f2() {
area.value += "onkeyup значення value " + kinput.value + "\n\n";
area.scrollTop = area.scrollHeight;
}
//# sourceURL=pen.jsНайпростіший приклад використання HTML події onkeypress
HTML
<input type="text" placeholder="Кнопки нажимати тут" id="kinput" onkeypress ="f(event)"><br>
<textarea id="area"></textarea>CSS
#kinput {
font-size: 150%;
box-sizing: border-box;
width: 95%;
}
#area {
width: 95%;
box-sizing: border-box;
height: 250px;
border: 1px solid black;
display: block;
}JS
var kinput = document.getElementById('kinput');
var area = document.getElementById('area');
var J = 0;
function f(e) {
J++;
area.value += "ASCII код кнопки " + e.keyCode + "\n";
area.scrollTop = area.scrollHeight;
}
//# sourceURL=pen.js Приклад використання HTML події onkeydown,onkeypress,onkeyup
HTML
<input type="text" placeholder="Кнопки нажимати тут" id="kinput" onkeypress ="f(event)" onkeydown ="f(event)" onkeyup ="f(event)" ><br>
<textarea id="area"></textarea>CSS
#kinput {
font-size: 150%;
box-sizing: border-box;
width: 95%;
}
#area {
width: 95%;
box-sizing: border-box;
height: 250px;
border: 1px solid black;
display: block;
}JS
var kinput = document.getElementById('kinput');
var area = document.getElementById('area');
var J = 0;
function f(e) {
J++;
area.value += e.type +
' keyCode=' + e.keyCode +
' which=' + e.which +
' charCode=' + e.charCode +
' char=' + String.fromCharCode(e.keyCode || e.charCode) + "\n";
area.scrollTop = area.scrollHeight;
}
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!