gpt4 book ai didi

javascript - 输入后运行JS函数,节点

转载 作者:行者123 更新时间:2023-11-28 16:59:28 31 4
gpt4 key购买 nike

我使用 setInterval 来运行该函数,但它会多次执行函数 2...

  1. 如何在输入中插入一个值后执行函数

  2. 第一个输入与其余输入的距离不同

  3. 如何在插入 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/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com