驗證碼/密碼輸入框（矩形方塊樣式）寫法設定

如上圖所示，在一些移動項目中對于驗證碼，密碼設定我們可能會追求更多的樣式輸入框設定，這裡是我自己寫的樣式和一些注意事項

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可以一套編譯多個不同的環境，但是因為最近也在學習編寫小程式就自己也在微信小程式下同步編寫了一下，對比上面的代碼可以看出小程式的寫法更加簡單，實作原理是一樣的，上下比較希望對您有所幫助。