Здравствуйте. Пишу клавиатурный тренажер, в котором при включенном capslock или не той раскладке выводится модальное окно, оповещающее об этом. Но при тестировании у меня возникла такая проблема: если сначала ввести на неправильной раскладке, нужное диалоговое окно сработает, но если сначала ввести что-то с капсом, выведется окно, оповещающее об этом и все последующие окна, не зависимо от проблемы, будут выводить окно капса
Буду благодарен, если вы укажите на ошибку в коде или предложите вариант решения этой проблемы ссылка на jsfiddle<!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="wrap"></div>
<div id="alertWindow">
<div id="alertWindowText">Неправильная раскладка!</div>
<div id="alertWindowButtons"><a href="#" id="button24" onclick="modalClose()">Продолжить</a></div>
</div>
<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>
//Функция которая получает keypress
// 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; // спец. символ
}
function isCyrillic(text) { //функция, которая проверяет на кириллицу
return /[а-я]/i.test(text);
}
function modalCloseWithEnter () { //закрытие модального окна по нажатию ентер
if (event.keyCode == 13 && event.type == "keydown") {
document.getElementById("wrap").style.display = "none";
document.getElementById("alertWindow").style.display = "none";
document.addEventListener("keypress", checkKeyEvent);
}
document.removeEventListener("keydown", modalCloseWithEnter);
}
function modalClose() { //Закрытие модального окна по клику на кнопку
document.getElementById("wrap").style.display = "none";
document.getElementById("alertWindow").style.display = "none";
document.addEventListener("keypress", checkKeyEvent);
}
var capsLockEnabled;
document.addEventListener('keydown', function(event) {
var caps = event.getModifierState && event.getModifierState('CapsLock');
capsLockEnabled = caps;
});
//Main function. Does everything you want
var counterLetters = 0;
var levelText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere tellus et leo mollis, vel".toLowerCase();
text.innerHTML = levelText;
let mistakesCounter = 0; //Счетчик ошибок
mistakes.innerHTML = ("Кол-во ошибок: " + mistakesCounter);
function checkKeyEvent() {
var keyName = getChar(event);
if (isCyrillic(keyName)) { //вывод сообщения о не правильной раскладке
document.getElementById("wrap").style.display = "inline-block";
document.getElementById("alertWindow").style.display = "inline-block";
document.removeEventListener("keypress", checkKeyEvent);
document.addEventListener("keydown", modalCloseWithEnter);
}
else if(levelText[counterLetters] == keyName){
console.log("Введен символ"); //просто проверка
levelText = levelText.substring(1);
text.innerHTML = levelText;
} else if (capsLockEnabled && keyName != null) {
var modalWindowCaps = document.getElementById("alertWindowText");
modalWindowCaps.innerHTML = ("Включен CapsLock!");
document.getElementById("wrap").style.display = "inline-block";
document.getElementById("alertWindow").style.display = "inline-block";
document.removeEventListener("keypress", checkKeyEvent);
document.addEventListener("keydown", modalCloseWithEnter);
} else if (keyName == null) {
//do nothing
console.log("Нажата спец. клавиша");
} else {
console.log("Введен неверный символ");
//тут будет код, оповещающий об ошибке
mistakesCounter++;
mistakes.innerHTML = ("Кол-во ошибок: " + mistakesCounter);
}
}
document.addEventListener("keypress", checkKeyEvent);
body {
margin: 0px;
background-color: #4BABE7;
}
#alertText {
color: red;
font-family: 'Source Sans Pro', sans-serif;
font-size: 19pt;
}
#alertWindowText {
width: 450px;
height: 70px;
background-color: #fff;
opacity: 1;
border-radius: 15px 15px 0 0;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
font-size: 22pt;
padding-top: 30px;
}
#alertWindowButtons {
width: 450px;
height: 70px;
background-color: #F4F4F4;
border-radius: 0 0 15px 15px;
text-align: center;
padding-top: 20px;
}
#button24 {
display: inline-block;
color: white;
text-decoration: none;
padding: .7em 4em;
outline: none;
border-width: 2px 0;
border-style: solid none;
border-color: #FDBE33 #000 #D77206;
border-radius: 6px;
background: linear-gradient(#F3AE0F, #E38916) #E38916;
transition: 0.2s;
font-family: 'Source Sans Pro', sans-serif;
}
#button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
#button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
#wrap {
height: 100%;
width: 100%;
opacity: 0.7;
background-color: black;
position: absolute;
z-index: 1;
display: none;
}
#alertWindow {
transform: translate(450px, 30px);
display: none;
position: absolute;
z-index: 1;
}
#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);
}
Простой
