Обработка событий клавиатуры: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в обработке событий клавиатуры с помощью JavaScript. Вам будут представлены различные HTML-структуры и JavaScript-код с пропусками. Ваша задача - заполнить пропуски, чтобы код работал корректно и выполнял поставленную задачу. Каждое задание направлено на отработку определенного аспекта взаимодействия с клавиатурой: отслеживание нажатия клавиш, определение кодов клавиш, предотвращение стандартного поведения браузера и многое другое. Внимательно читайте условия и используйте свои знания JavaScript для решения задач. Если возникнут трудности, вы можете воспользоваться подсказками.

Список тем

Отслеживание нажатия клавиши Enter

В текстовое поле вводится текст. Необходимо отследить нажатие клавиши Enter (код клавиши 13) и вывести введенный текст в абзац под текстовым полем. Убедитесь, что стандартное поведение (перенос строки) предотвращено.

HTML

Восстановить HTML

                      <input type="text" id="myInput">
<p id="output"></p>

<input type="text" id="myInput">
<p id="output"></p>

JavaScript

document.getElementById("myInput").addEventListener("input__1", function(event) {
  if (event.input__2 === input__3) {
    document.getElementById("output").textContent = input__4.target.value;
    event.input__5();
  }
});

                     document.getElementById("myInput").addEventListener("input__1", function(event) {
  if (event.input__2 === input__3) {
    document.getElementById("output").textContent = input__4.target.value;
    event.input__5();
  }
});

Используйте событие `keydown` для отслеживания нажатия клавиш. Внутри обработчика проверьте `event.keyCode` на равенство 13 (код Enter). Используйте `event.preventDefault()` для предотвращения стандартного поведения. Для получения значения текстового поля используйте свойство `value`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение цвета фона по нажатию клавиши

При нажатии клавиши "b" (английская раскладка) цвет фона элемента `div` с id "colorDiv" должен меняться на синий, а при нажатии клавиши "r" - на красный. Используйте `event.key` для определения нажатой клавиши.

CSS

#colorDiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

HTML

Восстановить HTML

                      <div id="colorDiv"></div>

<div id="colorDiv"></div>

JavaScript

document.addEventListener("input__1", function(event) {
  if (event.input__2 === "b") {
    document.getElementById("colorDiv").input__3.backgroundColor = "blue";
  } else if (event.key === "input__4") {
    document.getElementById("colorDiv").style.backgroundColor = "input__5";
  }
 console.log(event.key)
});

                     document.addEventListener("input__1", function(event) {
  if (event.input__2 === "b") {
    document.getElementById("colorDiv").input__3.backgroundColor = "blue";
  } else if (event.key === "input__4") {
    document.getElementById("colorDiv").style.backgroundColor = "input__5";
  }
 console.log(event.key)
});

Используйте событие `keydown`. Внутри обработчика используйте `event.key` для проверки нажатой клавиши. Для изменения цвета фона используйте свойство `style.backgroundColor`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Перемещение элемента стрелками

Используя клавиши-стрелки (влево, вправо, вверх, вниз), перемещайте квадрат (элемент `div` с id "moveDiv") по странице. Каждое нажатие стрелки должно сдвигать квадрат на 10 пикселей в соответствующем направлении. Используйте `event.key` для определения нажатой клавиши.

CSS

#moveDiv {
  width: 50px;
  height: 50px;
  background-color: green;
  position: relative;
  left: 0;
  top: 0;
}

HTML

Восстановить HTML

                      <div id="moveDiv"></div>

<div id="moveDiv"></div>

JavaScript

let div = document.getElementById("moveDiv");
let left = 0;
let topPos = 0;
document.addEventListener("input__1", function(event) {
  switch (event.input__2) {
    case "ArrowLeft":
      left input__3= 10;
      break;
    case "ArrowRight":
      left += 10;
      break;
    case "ArrowUp":
      topPos -= 10;
      break;
    case "input__4":
      topPos += 10;
      break;
  }
  div.style.left = left + "px";
  div.style.input__5 = topPos + "px";
});

                     let div = document.getElementById("moveDiv");
let left = 0;
let topPos = 0;
document.addEventListener("input__1", function(event) {
  switch (event.input__2) {
    case "ArrowLeft":
      left input__3= 10;
      break;
    case "ArrowRight":
      left += 10;
      break;
    case "ArrowUp":
      topPos -= 10;
      break;
    case "input__4":
      topPos += 10;
      break;
  }
  div.style.left = left + "px";
  div.style.input__5 = topPos + "px";
});

Используйте событие `keydown`. Внутри обработчика используйте `event.key` для проверки нажатой клавиши (`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`). Для изменения положения элемента используйте свойства `style.left` и `style.top`, преобразуя текущие значения в числа с помощью `parseInt()` и добавляя к ним 10 или -10.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Запрет ввода цифр в текстовое поле

Запретите ввод цифр (0-9) в текстовое поле (элемент `input` с id "noDigitsInput"). Любые другие символы должны вводиться без ограничений.

HTML

Восстановить HTML

                      <input type="text" id="noDigitsInput">

<input type="text" id="noDigitsInput">

JavaScript

document.getElementById("noDigitsInput").addEventListener("input__1", function(event) {
  if (event.key >= "input__2" && event.key <= "input__3") {
    event.input__4();
  }
 console.log(event.key)
});

                     document.getElementById("noDigitsInput").addEventListener("input__1", function(event) {
  if (event.key >= "input__2" && event.key <= "input__3") {
    event.input__4();
  }
 console.log(event.key)
});

Используйте событие `keypress`. Внутри обработчика используйте `event.key` для проверки вводимого символа. Если символ является цифрой, вызовите `event.preventDefault()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Смена изображения по нажатию клавиши

При нажатии клавиши "1" отображается первое изображение, при нажатии клавиши "2" - второе, при нажатии клавиши "3" - третье. Используйте элемент `img` с id "imageChanger".

HTML

Восстановить HTML

                      <img id="imageChanger" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150" height="150">

<img id="imageChanger" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150" height="150">

JavaScript

document.addEventListener("input__1", function(event) {
  let img = document.getElementById("imageChanger");
  switch (event.input__2) {
    case "1":
      img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
      break;
    case "input__3":
      img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";
      break;
    case "3":
      img.input__4 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png";
      break;
  }
});

                     document.addEventListener("input__1", function(event) {
  let img = document.getElementById("imageChanger");
  switch (event.input__2) {
    case "1":
      img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";
      break;
    case "input__3":
      img.src = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png";
      break;
    case "3":
      img.input__4 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png";
      break;
  }
});

Используйте событие `keydown`. Внутри обработчика используйте `event.key` для проверки нажатой клавиши. Для изменения изображения используйте свойство `src` элемента `img`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Увеличение/уменьшение размера текста по нажатию клавиш

При нажатии клавиши "+" (плюс) размер шрифта абзаца (элемент `p` с id "resizableText") должен увеличиваться на 2 пикселя, а при нажатии клавиши "-" (минус) - уменьшаться на 2 пикселя. Учтите, что клавиша "+" может находиться на одной клавише с другим символом, поэтому используйте `event.key`.

HTML

Восстановить HTML

                      <p id="resizableText">Изменяемый текст</p>

<p id="resizableText">Изменяемый текст</p>

JavaScript

document.addEventListener("input__1", function(event) {
  let p = document.getElementById("resizableText");
  let currentSize = parseInt(window.getComputedStyle(p).input__2);
  if (event.key === "+") {
    p.style.fontSize = (currentSize + 2) + "input__3";
  } else if (event.key === "-") {
    p.style.fontSize = (input__4 - 2) + "px";
  }
 console.log(event.key)
});

                     document.addEventListener("input__1", function(event) {
  let p = document.getElementById("resizableText");
  let currentSize = parseInt(window.getComputedStyle(p).input__2);
  if (event.key === "+") {
    p.style.fontSize = (currentSize + 2) + "input__3";
  } else if (event.key === "-") {
    p.style.fontSize = (input__4 - 2) + "px";
  }
 console.log(event.key)
});

Используйте событие `keydown`. Внутри обработчика используйте `event.key` для проверки нажатой клавиши. Получите текущий размер шрифта с помощью `window.getComputedStyle(element).fontSize`, преобразуйте его в число с помощью `parseInt()`, а затем увеличивайте или уменьшайте его на 2. Установите новый размер шрифта с помощью `element.style.fontSize`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Показ/скрытие элемента по нажатию клавиши

При нажатии клавиши "h" (английская раскладка) элемент `div` с id "toggleDiv" должен скрываться, если он видим, и показываться, если он скрыт. Изначально элемент видим.

CSS

#toggleDiv {
  width: 100px;
  height: 100px;
  background-color: orange;
}

HTML

Восстановить HTML

                      <div id="toggleDiv"></div>

<div id="toggleDiv"></div>

JavaScript

document.addEventListener("input__1", function(event) {
  if (event.input__2 === "h") {
    let div = document.getElementById("toggleDiv");
    if (div.style.display input__3 "none") {
      div.style.display = "none";
    } else {
      div.style.display = "input__4";
    }
  }
});

                     document.addEventListener("input__1", function(event) {
  if (event.input__2 === "h") {
    let div = document.getElementById("toggleDiv");
    if (div.style.display input__3 "none") {
      div.style.display = "none";
    } else {
      div.style.display = "input__4";
    }
  }
});

Используйте событие `keydown`. Внутри обработчика используйте `event.key` для проверки нажатой клавиши. Для проверки видимости элемента используйте `element.style.display`. Если элемент видим (`display` не равен "none"), установите `display` в "none", иначе установите `display` в "block".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Ввод только заглавных букв

Сделайте так, чтобы в текстовое поле (элемент `input` с id "uppercaseInput") можно было вводить только заглавные буквы. При вводе строчной буквы она должна автоматически преобразовываться в заглавную.

HTML

Восстановить HTML

                      <input type="text" id="uppercaseInput">

<input type="text" id="uppercaseInput">

JavaScript

document.getElementById("uppercaseInput").addEventListener("input__1", function(event) {
  event.target.value = event.target.value.input__2();
});

                     document.getElementById("uppercaseInput").addEventListener("input__1", function(event) {
  event.target.value = event.target.value.input__2();
});

Используйте событие `input`. Внутри обработчика получайте введенный символ, преобразуйте его в верхний регистр с помощью `toUpperCase()` и заменяйте введенное значение на преобразованное.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку