Блог по программированию

Урок 6. Примеры на Onkeyup, onkeydown и focus

Написано

admin

в

Пример №1

Скрипт меняющий строчные буквы на заглавные

СОБЫТИЯ и МЕТОДЫ

OnKeyUp Событие, происходит, когда пользователь отпускает клавишу (на клавиатуре).

toUpperCase () Метод, преобразует строку заглавными буквами.

КОД

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<p>Функция запускается, когда пользователь отпускает клавишу в поле ввода, меняет буквы срочные на заглавные </p>
Введите текст: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

Пример № 2

Меняющийся цвет фона <input> при вводе с клавиатуры

СВОЙСТВА

BackgroundColor возвращает цвет фона элемента.

OnKeyDown Событие, происходит, когда пользователь делает нажатие клавиши (на клавиатуре).

КОД

<p>Нажмите и удерживайте нажатой клавишу внутри текстового поля , чтобы установить красный цвет фона . Отпустите кнопку , чтобы установить зеленый цвет фона.</p>
<input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
<script>
function keydownFunction() {
    document.getElementById("demo").style.backgroundColor = "red";
}
function keyupFunction() {
    document.getElementById("demo").style.backgroundColor = "green";
}
</script>

Пример №3

Мышонок

СОБЫТИЯ, МЕТОДЫ и ФУНКЦИИ

OnClick событие, выполнение JavaScript при щелчке по кнопкеЮ

Element.getBoundingClientRect() Метод, возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера.

ParseInt () Функция, разбирает строку и возвращает целое число.

offsetWidth Свойство, свойство возвращает видимую ширину элемента в пикселях, в том числе отступа, границы и скроллинга, но не на полях.

offsetHeight Свойство, свойство возвращает видимую высоту элемента в пикселях, в том числе отступа, границы и скроллинга, но не на полях.

КОД

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #mouse {
      display: inline-block;
      cursor: pointer;
      margin: 0;
    }
    
    #mouse:focus {
      outline: 1px dashed black;
    }
  </style>
</head>
<body>
  <p>Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.</p>
  <pre id="mouse" tabindex="0">
 _   _
(q\_/p)
 /. .\
=\_t_/=   __
 /   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
 nn^nn
</pre>
  <script>
    document.getElementById('mouse').onclick = function() {
      this.style.left = this.getBoundingClientRect().left + 'px';
      this.style.top = this.getBoundingClientRect().top + 'px';

      this.style.position = 'fixed';
    };
    document.getElementById('mouse').onkeydown = function(e) {
      switch (e.keyCode) {
        case 37: // влево
          this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
          return false;
        case 38: // вверх
          this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
          return false;
        case 39: // вправо
          this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
          return false;
        case 40: // вниз
          this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
          return false;
      }
    };
  </script>
</body>
</html>

 

Виртуальные коды клавиш для javascript (event.keyCode)

Клавиша
Обозначение
10-ный код
16-ный код
забой DOM_VK_BACK_SPACE 8 0x08
Tab DOM_VK_TAB 9 0x09
Enter DOM_VK_ENTER 13 0x0D
Shift DOM_VK_SHIFT 16 0x10
Ctrl DOM_VK_CONTROL 17 0x11
Alt DOM_VK_ALT 18 0x12
Pause DOM_VK_PAUSE 19 0x13
CapsLock DOM_VK_CAPS_LOCK 20 0x14
Esc DOM_VK_ESCAPE 27 0x1B
пробел DOM_VK_SPACE 32 0x20
PageUp DOM_VK_PAGE_UP 33 0x21
PageDown DOM_VK_PAGE_DOWN 34 0x22
End DOM_VK_END 35 0x23
Home DOM_VK_HOME 36 0x24
стрелка влево DOM_VK_LEFT 37 0x25
стрелка вверх DOM_VK_UP 38 0x26
стрелка вправо DOM_VK_RIGHT 39 0x27
стрелка вниз DOM_VK_DOWN 40 0x28
Insert 45 0x2D
Delete 46 0x2E
0 48 0x30
1 49 0x31
2 50 0x32
3 51 0x33
4 52 0x34
5 53 0x35
6 54 0x36
7 55 0x37
8 56 0x38
9 57 0x39
A 65 0x41
B 66 0x42
C 67 0x43
D 68 0x44
E 69 0x45
F 70 0x46
G 71 0x47
H 72 0x48
I 73 0x49
J 74 0x4A
K 75 0x4B
L 76 0x4C
M 77 0x4D
N 78 0x4E
O 79 0x4F
P 80 0x50
Q 81 0x51
R 82 0x52
S 83 0x53
T 84 0x54
U 85 0x55
V 86 0x56
W 87 0x57
X 88 0x58
Y 89 0x59
Z 90 0x5A
левая клавиша Windows 91 0x5B
правая клавиша Windows 92 0x5C
клавиша Applications 93 0x5D
NumPad 0 96 0x60
NumPad 1 97 0x61
NumPad 2 98 0x62
NumPad 3 99 0x63
NumPad 4 100 0x64
NumPad 5 101 0x65
NumPad 6 102 0x66
NumPad 7 103 0x67
NumPad 8 104 0x68
NumPad 9 105 0x69
NumPad * 106 0x6A
NumPad + 107 0x6B
NumPad — 109 0x6D
NumPad . 110 0x6E
NumPad / 111 0x6F
F1 DOM_VK_F1 112 0x70
F2 DOM_VK_F2 113 0x71
F3 DOM_VK_F3 114 0x72
F4 DOM_VK_F4 115 0x73
F5 DOM_VK_F5 116 0x74
F6 DOM_VK_F6 117 0x75
F7 DOM_VK_F7 118 0x76
F8 DOM_VK_F8 119
0x77
F9 DOM_VK_F9 120 0x78
F10 DOM_VK_F10 121 0x79
F11 DOM_VK_F11 122 0x7A
F12 DOM_VK_F12 123 0x7B
NumLock DOM_VK_NUM_LOCK 144 0x90
ScrollLock DOM_VK_SCROLL_LOCK 145 0x91
PrintScreen DOM_VK_PRINTSCREEN 154 0x9A
Meta DOM_VK_META 157 0x9D
; 186 0xBA
= 187 0xBB
, 188 0xBC
— 189 0xBD
. 190 0xBE
/ 191 0xBF
~ 192 0xC0
[ 219 0xDB
\ 220 0xDC
] 221 0xDD
‘ 222 0xDE

Больше записей