<!--pages/jp_cp/jp_cp.wxml--> <view class="container"><view>請輸入車牌號碼：</view><view class="chepai"><view class="tel" bindtap="d1">{{carNo}}</view></view><!-- 省 --><view class="provinces" hidden='{{hidden1}}'><view class="pro_li lf" wx:for="{{item1}}" bindtap='sheng' data-sh="{{item}}">{{item}}</view><view class="pro_del lf" bindtap='null'>清空</view><view class="pro_close lf" bindtap='d2'>關閉</view> </view><!-- 號碼 --><view class="keyNums" hidden='{{hidden2}}'><view class="pro_li lf" wx:for="{{item2}}" bindtap='other' data-ot="{{item}}">{{item}}</view><view class="bot"><view class="pro_ok lf" bindtap='ok'>OK</view><view class="pro_d lf" bindtap='del'>Del</view></view> </view> </view>
/* pages/jp_cp/jp_cp.wxss */ .lf{float: left; } .rt{float: right; } .tel{border-bottom: 2rpx solid #ddd;height: 100rpx;line-height:100rpx; } .chepai{height: 200rpx;line-height:200rpx; } .provinces{overflow: hidden;background-color: #CED3D9;padding:30rpx 0;position: absolute;bottom: 0;left: 0;z-index: 10000; } .pro_li{font-size: 36rpx;height: 70rpx;width: 70rpx;line-height: 70rpx;text-align: center;border: 2rpx solid #ddd;margin: 5rpx;background-color:#fff; } .pro_close{width: 100rpx;height: 70rpx;line-height: 70rpx;font-size: 32rpx;text-align: center;background-color: #fff;border: 2rpx solid #ddd;margin: 5rpx ; } .pro_del{width: 100rpx;height: 70rpx;line-height: 70rpx;font-size: 32rpx;text-align: center;background-color: #fff;border: 2rpx solid #ddd;margin: 5rpx; } .keyNums{overflow: hidden;background-color: #CED3D9;padding:30rpx 0;position: absolute;bottom: 0;left: 0;z-index: 10000; } .pro_ok{width: 100rpx;height: 70rpx;line-height: 70rpx;font-size: 32rpx;text-align: center;background-color: #fff;border: 2rpx solid #ddd;margin: 5rpx ;/* margin-left: 35%; */ } .pro_d{width: 100rpx;height: 70rpx;line-height: 70rpx;font-size: 32rpx;text-align: center;background-color: #fff;border: 2rpx solid #ddd;margin: 5rpx; } // pages/jp_cp/jp_cp.js Page({/*** 頁面的初始數據*/data: {item1: ["京", "滬", "浙", "蘇", "粵", "魯", "晉", "冀","豫", "川", "渝", "遼", "吉", "黑", "皖", "鄂","津", "貴", "云", "桂", "瓊", "青", "新", "藏","蒙", "寧", "甘", "陜", "閩", "贛", "湘"],item2: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9","Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P","A", "S", "D", "F", "G", "H", "J", "K", "L","Z", "X", "C", "V", "B", "N", "M"],hidden1:true,hidden2:true,carNo: '',},//車牌輸入獲取焦點d1:function(){var that=this;if (that.data.carNo == ''){that.setData({hidden1: false,hidden2: true})}else{that.setData({hidden1: true,hidden2: false}) }},//車牌輸入失去焦點d2: function () {var that = this;that.setData({hidden1: true,hidden2: true})},//獲取車牌省份sheng:function(e){var that=this ;console.log(e.currentTarget.dataset.sh);that.setData({carNo: e.currentTarget.dataset.sh})if (that.data.carNo!=''){that.setData({hidden1: true,hidden2: false})} },//獲取車牌號碼other: function (e) {var that = this;console.log(e.currentTarget.dataset.ot);var carNo = that.data.carNo + e.currentTarget.dataset.ot;that.setData({carNo: carNo})},//回刪車牌del:function(){var that=this;var ss = that.data.carNo;console.log(ss);var s = ss.split('');console.log(s);console.log(s.slice(0, -1));if (s.slice(0, -1).length==0){that.setData({hidden1: false,hidden2: true})}console.log(s.join('').slice(0, -1));var s = s.join('').slice(0, -1);that.setData({carNo: s})console.log(that.data.carNo.length);},//確認輸入ok:function(){var that=this;that.setData({hidden1:true,hidden2:true})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

總結

以上是生活随笔為你收集整理的微信小程序——车牌键盘js+css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。