javascript input 隐藏 js隐藏input标签

在做一个输入短信验证码的功能，我做的这个功能的思路是有一个input输入框，这个输入框层级设置为负数，然后上面有六个div用于承接输入框输入的数字，这个功能网上有很多，一找就能找到，记录几个做这个的产生的bug，安卓的没啥问题，ios有几个问题

1：因为展示数字的位置下方是input,我们需要用输入框的事件吊起键盘，还有要获得它的值，所以还不能隐藏掉它也不能禁用它，所以在点击的时候ios会产生光标显示，安卓的没有，

解决方法

margin-left: -100%; text-indent: -999em;在把输入框的宽度定位1px，OK了一个

2：ios的短信验证码填充问题，ios收到短信验证码后你点击输入款会有个自动填充功能，你点击了验证码，验证码会直接到输入框里，但是在用这种隐藏隐藏输入框层级的方法里就会产生填充的时候只有最后一个框有数字，

解决方法，

填充的时候input是可以获得值的，取得input的值，当这个值等于6的时候也就是采用了填充，循环input的值放入进页面填写验证码的节点里，

ps;

我们在输入验证码的时候都会有个效果，看上去好看一点，当这个内容有值时就给它加上咱们自己想要的样式效果

var valCodeItems = $("div[name='val-item']");            //这是我输入验证码的六个框
.available {
    border-color: #0081db;
}$(valCodeItems).each(function(i){
		if($(this).text() != ''){
			$(this).addClass('available')
		} 
	})

至于短信填充两遍的问题，价格maxlength就好了

来个全一些的html和js

 

<div class="val-box" id="val-box">
            <input id="val-code-input"  type="tel" maxlength="6" onkeyup="checkForNum(this)"  onselectstart="return false;" onblur="checkForNum(this)" />
            <div name="val-item"></div>
            <div name="val-item"></div>
            <div name="val-item"></div>
            <div name="val-item"></div>
            <div name="val-item"></div>
            <div name="val-item"></div>
        </div> 
var valCodeInput = $('#val-code-input');
var valCodeItems = $("div[name='val-item']");
var regex = /^[\d]+$/;
var valCodeLength = 0;
$('#val-box').on('click',()=>{
    valCodeInput.focus();
})
valCodeInput.on('input propertychange change', (e) => {
	$(valCodeItems).each(function(i){
		if($(this).text() != ''){
			$(this).addClass('available')
		} 
	})
    valCodeLength = valCodeInput.val().length;
    console.log("wode="+valCodeInput.val())
    if(valCodeLength == 6){
    	console.log(valCodeLength)
    	$(valCodeItems).addClass('available')
    	$(valCodeItems[0]).text(valCodeInput.val()[0])
    	$(valCodeItems[1]).text(valCodeInput.val()[1])
    	$(valCodeItems[2]).text(valCodeInput.val()[2])
    	$(valCodeItems[3]).text(valCodeInput.val()[3])
    	$(valCodeItems[4]).text(valCodeInput.val()[4])
    	$(valCodeItems[5]).text(valCodeInput.val()[5])
    }else{
    	console.log(valCodeLength)
    }
    if(valCodeInput.val() && regex.test(valCodeInput.val())) {
        $(valCodeItems[valCodeLength - 1]).addClass('available');      
        $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
    }    
})
$(this).on('keyup', (e) => {
    if(e.keyCode === 8) {
        $(valCodeItems[valCodeLength]).removeClass('available');
        $(valCodeItems[valCodeLength]).text("");
    }
});

function checkForNum(obj) {
    obj.value = obj.value.replace(/[\D]/g, '');
}$('input').bind('input propertychange', function() {             //这里是我用来根据验证码输入来判断提交按钮的
	console.log($('#val-code-input').val())
	var phoneVal = $('#val-code-input').val()
	if(phoneVal != ''){
		console.log("输入验证码")
		document.getElementById("phoneTrue").disabled = false
		document.getElementById("phoneTrue").style.background = "#F3AE25"
	}else{
		console.log("没有输入验证码")
		document.getElementById("phoneTrue").disabled = true
		document.getElementById("phoneTrue").style.background = "#E1E1E1"
	}

})