запустить функцию JS после ввода, узел - PullRequest
Новая
       15

запустить функцию JS после ввода, узел

0 голосов
/ 17 января 2019

Я использовал setInterval для запуска функции, но она будет выполнять функцию 2 много раз ...

  1. Как выполнить функцию после ввода значения в поле ввода

  2. 1-й вход отличается от остальных

  3. как переместить вставку из 1 входа в следующий после вставки val (опция табуляции)

проверьте снайпера, написали несколько букв и пробелов, чтобы увидеть, что я имею в виду, для перехода к другому вводу нажмите вкладку 

window.setInterval(function(){
  checkLen();
  fill();
}, 200);

function checkLen(){
	x = document.getElementById("letters").getElementsByTagName("input").length;
	y=x-1;
	z = document.getElementsByTagName("input")[y].value;
	if(z == " "){
		document.getElementsByTagName("input")[y].style.opacity = 0;
	}
	
	if(x>0 && z.length>0){
		createLetter(x);
	}
	document.getElementsByTagName("input")[y].oninput = function() {checkLen()};
}

	function createLetter(x){
		num1=x+1;
		node = document.createElement("input");
        node.setAttribute("id", "letter-"+num1);
        node.setAttribute("maxlength", "1");
        node.setAttribute("type", "text");
        document.getElementById("letters").appendChild(node);
	}
	function fill(){
		text = "" ;
		x = document.getElementById("letters").getElementsByTagName("input").length;
		for(i = 0; i < x; i++){
			int =  document.getElementsByTagName("input")[i].value;
			text = text +int;

		}
		document.getElementById("check").innerHTML = text;

	}
	
	
body{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-color: white;
	display: block;
	position: relative;
	background-color: gray;
}
body *{
	display: inline-block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
	[class*="col-"] {
	box-sizing: border-box;
	display: inline-block;
    float: left;
    padding: 5px;
    margin: 0 auto;
    text-align: center;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

	input{
		width: 40px;
		height: 40px;
		font-size: 30px;
		text-align: center;
		background-color: orange;
		border-color: black;
		border-width: 1px;
		text-transform:uppercase;
		margin:2px;

	}
  script{
		display: none;
	}
	
<body>
	<div class="col-12" id="letters">
		<input id="letter-01" type="text" name="haslo" maxlength="1">
	</div>
	<div class="col-12">
		<p id="check"></p>
	</div>



</body>

Проверьте снайпер ... Также 1-й вход имеет расстояние, отличное от

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Может быть, вы используете jquery, просто позвонив .on("keypress",...), я только что заменил window.setInterval(...), и лучше всего использовать список событий с определенным элементом dom 

$(document).on('keypress',function(e) {
  checkLen();
  fill();
});

function checkLen(){
	x = document.getElementById("letters").getElementsByTagName("input").length;
	y=x-1;
	z = document.getElementsByTagName("input")[y].value;
	if(z == " "){
		document.getElementsByTagName("input")[y].style.opacity = 0;
	}
	
	if(x>0 && z.length>0){
		createLetter(x);
	}
	document.getElementsByTagName("input")[y].oninput = function() {checkLen()};
}

function createLetter(x){
  num1=x+1;
  node = document.createElement("input");
      node.setAttribute("id", "letter-"+num1);
      node.setAttribute("maxlength", "1");
      node.setAttribute("type", "text");
      document.getElementById("letters").appendChild(node);
}

function fill(){
  text = "" ;
  x = document.getElementById("letters").getElementsByTagName("input").length;
  for(i = 0; i < x; i++){
    int =  document.getElementsByTagName("input")[i].value;
    text = text +int;

  }
  document.getElementById("check").innerHTML = text;

}
body{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-color: white;
	display: block;
	position: relative;
	background-color: gray;
}
body *{
	display: inline-block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
	[class*="col-"] {
	box-sizing: border-box;
	display: inline-block;
    float: left;
    padding: 5px;
    margin: 0 auto;
    text-align: center;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

	input{
		width: 40px;
		height: 40px;
		font-size: 30px;
		text-align: center;
		background-color: orange;
		border-color: black;
		border-width: 1px;
		text-transform:uppercase;
		margin:2px;

	}
  script{
		display: none;
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
	<div class="col-12" id="letters">
		<input id="letter-01" type="text" name="haslo" maxlength="1">
	</div>
	<div class="col-12">
		<p id="check"></p>
	</div>



</body>
0 голосов
/ 17 января 2019

Один быстрый совет для вас, может быть, может помочь. Вы можете использовать метод события и связывания в jquery, чтобы определить, вставил ли пользователь значение в поле ввода. 

$ ("#yourFieldID").bind("change paste keyup", function() {
    // some code
});

Также вы можете использовать propertychange event 

 $('#yourFieldID').on('propertychange input', function () {
    //some code
 });

Чистый путь JS 

document.getElementById("yourInput").oninput = () => { 
  console.log('user entered something'); 
}
...