前言
做停车行业的小伙伴都知道,需要用户输入车牌的时候,车牌容易输入错误,同时也会很麻烦。所以本文章是联合了某前端开发同学一起提供开源代码,集成了国内车牌号的规则,为用户提供定制键盘方便用户输入车牌,下边看看效果吧。
效果演示
点击下方小程序卡片访问,体验效果。代码有不完善的地方可以在公众号回复,开发同学后续会继续维护。
车牌号规则
这里先简单整理了中国车牌号的规则:大家有兴趣可以百度搜索更加完整的车牌规则研究~
开源代码
<view class="SevenDreamY-keyboard-head">
<text bindtap="onConfirm">完成</text>
</view>
<view class="SevenDreamY_keyboard" hidden="{{isProvince}}">
<view class="special_row" hidden="{{!isSpecial}}">
<view class="special_item com_key {{H_Ckey ?'prohibit_key':''}}" bindtap="onKey" data-key="港">港</view>
<view class="special_item com_key {{H_Ckey ?'prohibit_key':''}}" bindtap="onKey" data-key="澳">澳</view>
<view class="special_item com_key {{CarNumid !== 0?'prohibit_key':''}}" bindtap="onKey" data-key="学">学</view>
<view class="special_item com_key {{CarNumid !== 3?'prohibit_key':''}}" bindtap="onKey" data-key="警">警</view>
<view class="special_item com_key {{CarNumid !== 3?'prohibit_key':''}}" bindtap="onKey" data-key="应急">应急</view>
<view class="special_item com_key {{CarNumid !== 4 || !H_Ckey?'prohibit_key':''}}" bindtap="onKey" data-key="使">使</view>
<view class="special_item com_key {{CarNumid !== 4 || !H_Ckey?'prohibit_key':''}}" bindtap="onKey" data-key="领">领</view>
</view>
<view class="key_row">
<block wx:for="{{firstRow}}" wx:for-index="idx2" wx:for-item="key_item" wx:key="idx2">
<view class="key_item com_key {{SecondNotKeyValue||isSpecial?'prohibit_key':''}}" bindtap="onKey" data-key="{{key_item}}">
{{key_item}}
</view>
</block>
</view>
<view class="key_row">
<block wx:for="{{SecondRow}}" wx:for-index="idx2" wx:for-item="key_item" wx:key="idx2">
<view class="key_item com_key {{isSpecial?'prohibit_key':key_item == 'I'?'prohibit_key':''}}" bindtap="onKey" data-key="{{key_item}}">
{{key_item}}
</view>
</block>
</view>
<view class="key_row">
<block wx:for="{{ThirdRow}}" wx:for-index="idx2" wx:for-item="key_item" wx:key="idx2">
<view class="key_item com_key {{isSpecial?'prohibit_key':''}}" bindtap="onKey" data-key="{{key_item}}">
{{key_item}}
</view>
</block>
</view>
<view class="key_row">
..........................................
完整代码下载链接:https://github.com/SevenDreamYang/miniprogram-keyboard-type
代码开发者
Name:SevenDreamYang Time:2020-4
原创文章,作者:王得宇AIPM,如若转载,请注明出处:https://www.pmtemple.com/silence/11145/