验证码/密码输入框（矩形方块样式）写法设置

如上图所示，在一些移动项目中对于验证码，密码设置我们可能会追求更多的样式输入框设置，这里是我自己写的样式和一些注意事项

uniapp

<view class="wrapper">
		<view class="title">
			<view class="title">填写验证码</view>
			<view class="send-code" v-if="identifyObj.disabled">已发送短信验证码到<text>{{phone}}</text></view>
			<view class="content">
				<view class="input_row" >
					<view @click="getFocus" class="pwd_item" v-for="(item,index) in 4">
						<text v-if="pwdVal.length > index"></text>
					</view>
				</view>
				<input type="text"  class="input_control" :focus="payFocus" maxlength="4" @blur="lostfocus"  @input="inputPwd" />
			</view>
			<view class="setcode btn" @click="sendcod" :class="(identifyObj.disabled) == true ? 'active' : ''">{{identifyObj.identifyText}}</view>
			<view class="send-code" v-if="identifyObj.disabled"><text>{{identifyObj.count}}</text>秒后重新发送</view>
		</view>
	</view>

上面是uniapp环境下的代码块，在此环境下编写的时候遇到的兼容问题比较多样，这类样式输入框实现的思路是，首先编写一个样式框，此样式框不输入，只做展示交互效果，在这后面设置一个input框，可以通过左右偏移使其达到视觉视图内看不见的效果，点击样式框的时候获取到input框的焦点即可输入，点击样式输入框外的区域则触发失去焦点事件@blur，值得注意的是一开始input的type属性我设置的是number，结果发现在输入时如果中途点击了区域外失去了焦点，再次点击获取焦点输入时，已输入的内容是不可删除的，而且要注意的是number类型的框使用maxlength限制输入长度是无效的。最后我改换成text属性在uniapp中就能完美解决，如果有知道为什么会有这个区别的大佬也欢迎给我评论留言探讨学习。

微信小程序

<view class="wrapper">
  <view class="title">填写验证码</view>
  <view class="send-code" wx:if="{{isSend}}">已发送短信验证码到<text>{{phone}}</text></view>
  <!-- <view  wx:if="{{}}" class="send-code" style="color: #FD5353;">请输入正确的验证码</view> -->
  <view class='content'>
    <view class='input_row' catchtap='getFocus'>
      <view class='pwd_item' wx:for='{{4}}' wx:key='item' wx:for-index='i'>
        <text wx:if='{{pwdVal.length>i}}'></text>
      </view>
    </view>
    <input class='input_control' password type='number' focus='{{payFocus}}' adjust-position='{{false}}'
      bindinput='inputPwd' maxlength='4' />
  </view>
  <view class="code btn {{identifyObj.disabled?'bg':''}}" bindtap="sendCode">{{identifyObj.identifyText}}</view>
  <view class="send-code" wx:if="{{identifyObj.disabled}}"><text>{{identifyObj.count}}</text>秒后重新发送</view>
</view>

虽然uniapp可以一套编译多个不同的环境，但是因为最近也在学习编写小程序就自己也在微信小程序下同步编写了一下，对比上面的代码可以看出小程序的写法更加简单，实现原理是一样的，上下比较希望对您有所帮助
新增相关js代码

			getFocus() {
				this.payFocus = true;
				
			},
			inputPwd(e) {
				let that = this;
				that.pwdVal = e.detail.value;
				if (e.detail.value.length == 4) {
					let pwd = e.detail.value;
				}
				that.getFocus();
			},

按钮发送验证码倒计时处理函数

sendCode(){
				let that = this;
				let data={
					msgType:'set_passwd',
					moblie:that.phone
				}
				// 请求接口
				getCodeApi(data).then( res=> {
					console.log(res);
					setTimeout(function () {
					    that.$util.Tips({
					    	title: res.msg
					    });
					}, 1000);
					/**
					 * 倒计时
					 * 
					 */
					
					that.timer = setInterval(() => {
						if (that.identifyObj.count >= 1) {
							that.identifyObj.count--
							// identifyObj.identifyText = '重新获取(' + identifyObj.count + '秒)'
							that.identifyObj.identifyText = '重新获取'
							that.identifyObj.disabled = true
						} else {
							that.identifyObj.count = 59
							that.identifyObj.identifyText = '获取验证码'
							that.identifyObj.disabled = false
							clearInterval(that.timer)
						}
						
					}, 1000)
				}).catch({
					
				})
			},