Lab3-JS/practice.html at master · alyonakova/Lab3-JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
 <head>
  <title>Keyboard events</title>
  <style>
   body {
   background: linear-gradient(to bottom, #95cde2, #cbe3ec);
   }
   h1 {
   color: #49475B;
   }
   h3 {
   color: #9E788F;
   }
  </style>
  <script>
   var keypressed = 0;
   var keyup = 0;
   var keydown = 0;
   var change = 0;

   function showNumbers() {
     document.getElementById("div2").innerHTML = '<p>' + 'onKeyPressed: ' + keypressed + '<br>' +
                                               'onKeyUp: ' + keyup + '<br>' +
                                               'onKeyDown: ' + keydown + '<br>' +
                                               'onChange: ' + change + '<br>' + '</p>';
   }

   function keypress(event) {
    keypressed++;
    var x = (event.keyCode || event.which);
    var x_char = String.fromCharCode(x);
    showNumbers();
    if (x_char == 'f') {
      event.preventDefault();
    }
   }

   function keyupp() {
    keyup++;
    showNumbers();
   }

   function keydownn() {
    keydown++;
    showNumbers();
   }

   function onchang() {
    change++;
    showNumbers();
   }

   function fillDiv() {
    var text = document.getElementById("inp").value;
    var result = text.replace(/a/gi,"A");
    document.getElementById('divChange').innerHTML = result;
   }

  </script>
 </head>
 <body>
 <h1>Лабораторная работа №3</h1>
 <h3>Задание 1</h3>
 <p>Создать элемент, реагирующий на события клавиатуры. Результаты реакции выводятся отдельно. Символ "f" печататься не должен.</p>
  <div>
   <input type="text" placeholder="Ваши символы" style="margin-left: 10px" onKeyDown="keydownn()" onKeyUp="keyupp()" onKeyPress="keypress(event)" onChange="onchang()">
  </div>
  <div id="div2"></div>
  <hr>
  <h3>Задание 2</h3>
  <p>Создать на странице элемент HTML <code>&lt;input type=text&gt;</code> и элемент <code>&lt;div&gt;&lt;/div&gt;</code>. Написать обработчики событий так, чтобы при наборе текста в элементе <code>&lt;input...&gt;</code> он так же появлялся и в элементе <code>&lt;div&gt;&lt;/div&gt;</code>, причем все буквы "a", набираемые в элементе <code>&lt;input...&gt;</code>, при выводе в элемент <code>&lt;div&gt;&lt;/div&gt;</code> замещались бы на букву "A".</p>
  <input type="text" id="inp" placeholder="Ваши символы" onKeyUp="fillDiv(event)">
  <div id="divChange"></div>
 </body>
</html>