Question

我使用setInterval来运行该函数，但是它将执行2次多次...

在将值插入输入后如何执行功能
第一个输入与其余输入的距离不同
如何在插入val（选项卡选项）后将插入从1个输入移至下一个输入

检查狙击手，写一些字母和一些空格以了解我的意思，以跳到另一个输入按制表符

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>

检查狙击手... 第一个输入的距离也比

Answer 1

一个简单的提示可能会对您有所帮助。您可以在jquery中使用事件和绑定方法来检测用户是否在输入字段中插入值。

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

您还可以使用propertychange事件

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

纯JS方式

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

Answer 2

也许您只是通过调用.on("keypress",...)来使用jquery，而我刚刚替换了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>

输入节点后运行JS函数

2 个答案: