javascript - 关于input标签的focus事件疑问-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - 关于input标签的focus事件疑问

迷茫 2017-04-10 17:16:03

152

我的需求是在每次输入完一个input框以后（只能输入一个数字），下一个input锁定，类似微信支付密码那样的交互；

html:

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上这个功能不能实现（每次的只能单击下一个输入框，重新跳出键盘），故问这代码有没有问题，或者有更好的方案？

之前想用p改写input标签，然后input标签上的很多属性在p标签上不够支持，maxlength等等？还没找到原因

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

reply all (2)

PHPzhong2017-04-10 17:18:03 2 floor

你只需要一个input即可。

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; }

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';

https://jsfiddle.net/scroller/gLn3nzaf/

Like+0

Add Reply

阿神2017-04-10 17:18:03 1 floor

最简单的办法就是，然后用css模拟你要的效果，例如设置background-image以及文字大小，字符间隔。不但实现起来容易，而且处理的时候也不需要对4个input的值进行组合了。
补充：背景图应该类似 [] [] [] [[]] [] [] []
[[]]表示focus效果，然后onkeyup判断一下当前value.length，然后平移背景图就好了。

Like+0

Add Reply