Уже решил проблему. Вот код:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Typer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
</head>
<body id="body">
<div id="main"><b><div id="mistakes"></div></b><div id="alertText"></div><div id="field"><span id="text"></span></div></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body {
margin: 0px;
background-color: #4BABE7;
}
#main {
width: 1366px;
height: 510px;
background-color: #4BABE7;
}
#field {
background-color: white;
margin-left: 150px;
margin-right: 150px;
border-radius: 20px;
transform: translate(0, 110px);
padding-top: 30px;
padding-bottom: 30px;
padding-right: 40px;
padding-left: 40px;
}
#text {
font-family: 'Source Sans Pro', sans-serif;
font-size: 18pt;
}
#mistakes {
font-family: 'PT Sans Narrow', sans-serif;
text-decoration: underline;
color: white;
font-size: 13pt;
transform: translate(170px, 105px);
}
#alertText {
color: red;
font-family: 'Source Sans Pro', sans-serif;
font-size: 19pt;
}
// event.type должен быть keypress
function getChar(event) {
if (event.which == null) { // IE
if (event.keyCode < 32) return null; // спец. символ
return String.fromCharCode(event.keyCode)
}
if (event.which != 0 && event.charCode != 0) { // все кроме IE
if (event.which < 32) return null; // спец. символ
return String.fromCharCode(event.which); // остальные
}
return null; // спец. символ
}
var counterLetters = 0;
var levelText= "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere tellus et leo mollis, vel"; //текст, который будет вводить пользователь
text.innerHTML=levelText;
let mistakesCounter = 0; //Счетчик ошибок
mistakes.innerHTML = ("Кол-во ошибок: " + mistakesCounter);
function checkKeyEvent() {
var keyName = getChar(event);
if(levelText[counterLetters] == keyName){
console.log("Введен символ"); //просто проверка
levelText = levelText.substring(1);
text.innerHTML = levelText;
} else if (keyName == null) {
//do nothing
console.log("Нажата спец. клавиша");
alertText.innerHTML =("Нажата спец. клавиша");
} else {
console.log("Введен неверный символ");
//тут будет код, оповещающий об ошибке
mistakesCounter++;
mistakes.innerHTML = ("Кол-во ошибок: " + mistakesCounter);
}
}
document.addEventListener("keypress", checkKeyEvent);