我使用 setInterval 来运行该函数，但它会多次执行函数 2...
如何在输入中插入一个值后执行函数
第一个输入与其余输入的距离不同
如何在插入 val(tab 选项)后将插入从 1 个输入移动到下一个输入
检查 sniper，写一些字母和一些空格看看我的意思，跳到另一个输入按 tab
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>检查狙击手... 第一个输入的距离也不同于
最佳答案
给你的一个快速提示，也许能帮到你。您可以使用 jquery 中的事件和绑定(bind)方法来检测用户是否将值插入输入字段。
$ ("#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');
}
关于javascript - 输入后运行JS函数，节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54242715/