@IckiSanZ

Как решить проблему с модальными окнами?

Здравствуйте. Пишу клавиатурный тренажер, в котором при включенном 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); 
}
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
sonca-ca
@sonca-ca
Изначально у вас сообщение про раскладку, когда проблема с капсом вы меняете сообщение, а вот когда новая проблема с раскладкой после капса, текст не меняется и выводится что было
if (isCyrillic(keyName)) { //вывод сообщения о не правильной раскладке
   //нужно добавить
    var modalWindowCaps = document.getElementById("alertWindowText");
    modalWindowCaps.innerHTML = ("Раскладка!");
    ...
}  else if (capsLockEnabled && keyName != null) {
    var modalWindowCaps = document.getElementById("alertWindowText");
    modalWindowCaps.innerHTML = ("Включен CapsLock!");
    ...
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы