Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Странное поведение input (https://javascript.ru/forum/css-html/84612-strannoe-povedenie-input.html)

АндрейD 28.10.2022 11:34

Странное поведение input
 
Ситуация такая - игра "Шарики", когда игра заканчивается, срабатывает функция генерации формы, для отправки результата в "Базу Данных". В форме создаётся скрытый input, для записи баллов; input для ввода имени игрока и кнопка "Отправить".

Проблема в input ввода имени игрока. Данные из браузера вставляются в input и отправляются в БД без ошибок. А вот ввести в этот input, что либо с клавиатуры невозможно. Причём при клике на него начинает мигать курсор но никакие символы с клавиатуры не вводятся.

Для проверки этой функции (генерации формы) я создавал отдельный файл, вне данного проекта - и функция срабатывает отлично, данные в input вводятся и с клавиатуры и из браузера.

Вопрос - какие могут быть причины такого поведения input? Любые соображения и мысли были бы кстати.

АндрейD 28.10.2022 12:23

События click и keydown на этом input происходят, в console.log(event.key) и console.log(event.code) всё выводится. Только ничего не пишется в этом input с клавиатуры.

рони 28.10.2022 12:53

АндрейD,
без примера можно только гадать)))

АндрейD 28.10.2022 13:21

Сижу-думаю и похоже причина в анонимной функции в самом низу кода.

document.addEventListener('DOMContentLoaded', function() {
	let tetris = [];
	let game = document.getElementById('game');
	let outPoints = document.getElementById('out-points');
	let color = [1, 2, 3, 4, 5];
	let timer;
	let points = 0;
	let flag;
	
	//заполнение массива
	function init() {
		let x = 9;
		let y = 15;
		for(let i = 0; i < y; i++) {
			tetris[i] = [];
			for(let j = 0; j < x; j++) {
				tetris[i][j] = 0;
			}
		}
	}
	
	//отрисовка игропого поля
	function picture() {
		let out = '';
		game.style.backgroundColor = '#dee1e6';		//после старта дорисовка
		for(let i = 0; i < tetris.length; i++) {
			for(let j = 0; j < tetris[i].length; j++) {
				if(tetris[i][j] == 0) {
					out += '<div class="white"></div>';
				} else if(tetris[i][j] == 1 || tetris[i][j] == 11) {
					out += '<div class="orange"></div>';
				}
				else if(tetris[i][j] == 2 || tetris[i][j] == 12) {
					out += '<div class="blue"></div>';
				}
				else if(tetris[i][j] == 3 || tetris[i][j] == 13) {
					out += '<div class="green"></div>';
				}
				else if(tetris[i][j] == 4 || tetris[i][j] == 14) {
					out += '<div class="red"></div>';
				}
				else if(tetris[i][j] == 5 || tetris[i][j] == 15) {
					out += '<div class="black"></div>';
				}
			}
		}
		game.innerHTML = out;
		outPoints.textContent = points;
	}
	
	//игровой блок - число->цвет
	function randomColor() {
		function getRandom() {
		  let min = 1;
		  let max = color.length;
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		tetris[0][0] = getRandom();  //число для функции picture()
		//console.log(tetris[0][0]);
	}
	
	//запуск игры кнопкой Start
	function start() {
		clearTimeout(timer);
		timer = setTimeout(function() {
			picture();
			flag = true;
			for(let i = tetris.length-1; i >= 0; i--) {
				for(let j = 0; j < tetris[i].length; j++) {
					if(tetris[i][j] < 10) {
						if(i == tetris.length-1 && tetris[i][j] != 0) {
							tetris[i][j] = tetris[i][j] + 10;	//остановленный элемент
						} else if(tetris[i][j] != 0) {
							if(tetris[i+1][j] == 0) {
								tetris[i+1][j] = tetris[i][j];
								tetris[i][j] = 0;
								flag = false;
								if(i+1 == tetris.length-1) {
									tetris[i+1][j] = tetris[i+1][j] + 10; // +10 ???
								}
							} else if(tetris[i+1][j] >= 10) {
								tetris[i][j] = tetris[i][j] + 10; 
							}	
						} 
					}
				}
			}
			checkLine();
			if(flag) {
				randomColor();
			}
			start();
		}, 200);
		finish();
	}
	
	//сдвиг закрашенного элемента вправо
	function goRicht() {
		for(let i = tetris.length-1; i >= 0; i--) {
			for(let j = tetris[i].length-1; j >= 0; j--) {
				if(tetris[i][j] < 10) { 
					if(tetris[i][j] !=0 && tetris[i][j+1] == 0) {
						tetris[i][j+1] = tetris[i][j];
						tetris[i][j] = 0;
					}
				}
			}
		}
		picture();
	}
	
	//сдвиг закрашенного элемента влево
	function goLeft() {
		for(let i = tetris.length-1; i >= 0; i--) {
			for(let j = 0; j < tetris[i].length; j++) {
				if(tetris[i][j] < 10) {
					if(tetris[i][j] != 0 && tetris[i][j-1] == 0) {
						tetris[i][j-1] = tetris[i][j];
						tetris[i][j] = 0;
					}
				}
			}
		}
		picture();
	}
	
	//проверка - по горизонтали 3 одинаковых цвета
	function checkLine() {
		for(let i = tetris.length-1; i >= 0; i--) {
			for(let j = 0; j < tetris[i].length; j++) {
				if(tetris[i][j] > 10 && tetris[i][j+1] != undefined && tetris[i][j+2] != undefined) {
					if(tetris[i][j] == tetris[i][j+1] && tetris[i][j] == tetris[i][j+2]) {
						tetris[i][j] = 0;
						tetris[i][j+1] = 0;
						tetris[i][j+2] = 0;
						points += 30;
						for(let m = i; m >= 0; m--) {
							if(tetris[m][j] > 10) tetris[m][j] = tetris[m][j] - 10;
							if(tetris[m][j+1] > 10) tetris[m][j+1] = tetris[m][j+1] - 10;
							if(tetris[m][j+2] > 10) tetris[m][j+2] = tetris[m][j+2] - 10;
						}
					}
				}
			}
		}
	}
	
	// финиш
	function finish() {
		if(tetris[1][0] >= 10) {
			clearTimeout(timer);
			createForm();
		}
	}
	
	//создание формы отправки в БД
	function createForm() {
		let formBlock = document.getElementById('form-block');
		let forma = document.createElement('form');
		forma.innerHTML = '<h2 class="save">Сохранить результат</h2>';
		forma.setAttribute('action', 'setdb.php');
		forma.setAttribute('method', 'POST');
		let hiddenInput = document.createElement('input');
		hiddenInput.setAttribute('type', 'hidden');
		hiddenInput.setAttribute('name', 'hidden');
		hiddenInput.setAttribute('value', points);
		let nameInput = document.createElement('input');
		nameInput.setAttribute('type', 'text');
		nameInput.setAttribute('name', 'user');
		nameInput.setAttribute('value', '');	
		let submitInput = document.createElement('input');
		submitInput.setAttribute('type', 'submit');
		submitInput.setAttribute('name', 'submit');
		submitInput.setAttribute('value', 'Сохранить');
		forma.append(hiddenInput);
		forma.append(nameInput);
		forma.append(submitInput);
		formBlock.append(forma);
	}
	
	document.getElementById('butt').onclick = function() {
		init();
		picture();	//отрисовка
		randomColor();
		start();
	}
	
	document.onkeydown = function(event) {
		if(event.code == 'ArrowRight' && tetris[1][0] < 10) {
			goRicht();
		} else if(event.code == 'ArrowLeft' && tetris[1][0] < 10) {
			goLeft();
		}
			return false;		
	}
});

рони 28.10.2022 13:30

Цитата:

Сообщение от АндрейD
похоже причина в анонимной функции в самом низу кода.

:yes:
строка 194 отменяет нажатия

АндрейD 28.10.2022 13:32

Всё, решение нашёл. В самом низу кода, в анонимной функции удалил строку
return false;
Теперь работает нормально. Спасибо рони за отклик и желание помочь.

АндрейD 28.10.2022 13:34

Цитата:

Сообщение от рони (Сообщение 548622)
:yes:
строка 194 отменяет нажатия

Спасибо ещё раз, пока отправлял ответ, а вы уже написали. Думал 2 дня, чего только в голову не приходило.


Часовой пояс GMT +3, время: 12:46.