使用javascript切换到以前的按键输入。
使用javascript切换到以前的按键输入。
提问于 2022-04-24 14:10:59
当达到输入框的最大长度时，我希望移动到带有javascript的下一个inputbox。当按下backspace键时，我希望清除当前的输入框并移动到前一个输入框。
这挺管用的。但是，每当我按下backspace键时，它就会转到上一个输入框，但不清除当前打开的输入框。
榜样；
var elts = document.getElementsByClassName('test')
Array.from(elts).forEach(function(elt){
elt.addEventListener("keydown", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13 || elt.value.length == 1) {
// Focus on the next sibling
elt.nextElementSibling.focus()
}
if( event.keyCode == 8)
{
if (elt.previousElementSibling != null)
{
elt.previousElementSibling.focus();
}
}
});
})body {
margin: 1em;
}
.field {
margin-bottom: 1em;
}<input type="text" class="test" id="0" maxlength="1"/>
<input type="text" class="test" id="1" maxlength="1"/>
<input type="text" class="test" id="2" maxlength="1"/>
<input type="text" class="test" id="3" maxlength="1"/>
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-04-24 14:21:35
试一试
var elts = document.getElementsByClassName('test')
Array.from(elts).forEach(function(elt) {
elt.addEventListener("keydown", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13 ||
event.keyCode !== 8 && elt.value.length === Number(elt.maxLength)
) {
// Focus on the next sibling
elt.nextElementSibling.focus()
}
if (event.keyCode == 8) {
elt.value = '';
if (elt.previousElementSibling != null) {
elt.previousElementSibling.focus();
event.preventDefault();
}
}
});
})body {
margin: 1em;
}
.field {
margin-bottom: 1em;
}<input type="text" class="test" id="0" maxlength="1" />
<input type="text" class="test" id="1" maxlength="1" />
<input type="text" class="test" id="2" maxlength="1" />
<input type="text" class="test" id="3" maxlength="1" />
Stack Overflow用户
发布于 2022-04-24 14:52:27
使用key而不是keyCode
key是用户想要看到的东西(持有"A“的shift或capslock，而不是"a")
并利用getAttribute方法
元素接口的
getAttribute方法返回元素上指定属性值。
此外，如果前面的元素不存在空(空或未定义)，我还使用了解构和可选链来避免错误。
var inputs = document.getElementsByClassName("test");
Array.from(inputs).forEach(function (input) {
input.addEventListener("keydown", keyhandler);
});
function keyhandler(e) {
let { key } = e;
let max = this.getAttribute("maxlength");
if (key == "Backspace") {
this.value = "";
this?.previousElementSibling?.focus();
e.preventDefault();
} else if (key == "Enter" || this.value.length >= max) {
this.nextElementSibling.focus();
}
}body {
margin: 1em;
}
.field {
margin-bottom: 1em;
}<input type="text" class="test" id="0" maxlength="1" />
<input type="text" class="test" id="1" maxlength="1" />
<input type="text" class="test" id="2" maxlength="1" />
<input type="text" class="test" id="3" maxlength="1" />
Stack Overflow用户
发布于 2022-04-24 14:18:15
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71989220
复制相关文章
相似问题
腾讯云开发者
