关于input标签的focus事件疑问
我的需求是在每次输入完一个input框以后（只能输入一个数字），下一个input锁定，类似微信支付密码那样的交互；
html:
<form id="voCash" name="card" method="post">
<input id="pac1" class="n1" type="tel" value="" maxlength="1" onKeyUp="return T1_onkeyup()" name="T1" tabindex = "1">
<input id="pac2" class="n2" type="tel" value="" maxlength="1" onKeyUp="return T2_onkeyup()" name="T2" tabindex = "2">
<input id="pac3" class="n3" type="tel" value="" maxlength="1" onKeyUp="return T3_onkeyup()" name="T3" tabindex = "3">
<input id="pac4" class="n4" type="tel" value="" maxlength="1" onKeyUp="return T4_onkeyup()" name="T4" tabindex = "4">
</form>
js:
function T1_onkeyup() {
if(document.card.T1.value.length==1){
document.card.T2.focus();
}
}
function T2_onkeyup() {
if(document.card.T2.value.length==1){
document.card.T3.focus();
}
}
function T3_onkeyup() {
if(document.card.T3.value.length==1){
document.card.T4.focus();
}
}
function T4_onkeyup() {
if(document.card.T4.value.length==1){
document.card.T1.focus();
}
}我主要是在移动端实现，在安卓上面没问题，在ios上这个功能不能实现（每次的只能单击下一个输入框，重新跳出键盘），故问这代码有没有问题，或者有更好的方案？
之前想用div改写input标签，然后input标签上的很多属性在div标签上不够支持，maxlength等等？还没找到原因
展开
收起
1
条回答
写回答
写回答
-
IT从业你只需要一个input即可。
<span></span> <span></span> <span></span> <span></span> <input type="text" max-length='4'>css
span{ border: 2px solid #ccc; display: inline-block; height: 60px; width: 60px; line-height: 60px; text-align: center; margin: auto 4px; vertical-align: middle; font-size: 30px; } input{ height: 1px; overflow: hidden; padding: 0; border: none; background-color: transparent; color: transparent; } input:focus{ outline: none; }js
var input =document.querySelector('input'), spans = document.querySelectorAll('span'); input.addEventListener('input', function(){ var value = this.value, l = value.length; for( var i = 0; i < 4; i++){ spans[i].innerHTML = value[i] || ''; spans[i].style.borderColor = ''; } if( l>0 ) { spans[Math.min(3,l)].style.borderColor = '#59C7B2'; }else{ spans[0].style.borderColor = '#59C7B2'; } }, false); input.addEventListener('blur', function(){ this.focus(); }, false); input.focus(); spans[0].style.borderColor = '#59C7B2';2019-07-17 19:44:46赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
