小程序——自定义键盘component

先看效果图：



使用方法如下：
wxml中

js中

data:{
	carCodeNumber:'',//车牌号
	isKeyboard: false, //是否显示键盘
	keyboardType:'keyboardOne',//键盘类型
 	isKeyboardContent:true,//控制首先展示省称还是英文
	maxLength:'',//最大长度
	minLength:'',//最小程度
	test:'',//正则
	placeholder:'',//提示信息
	whichInput:'',//方法名
	inputContent:'',//input内容
}
getCarCode() {
	this.setData({
	  isKeyboard:true,
	  maxLength:17,
	  minLength:17,
  	  isKeyboardContent:false,
	  test:'[A-Z0-9]{3}',
	  placeholder:'请输入17位车辆识别代号',
	  whichInput:'changeCarCode',
	  inputContent: this.data.carCode
	})
}
changeCarCode(e){
	this.setData({
	  isKeyboard: false,
	  carCode: e.detail.inputContent
	})
}

自定义键盘源码如下：
wxml源码

  
    {
    {inputContent || placeholder}}
    
      love.fwhf.xyz
      省称
      英\数
      ✔
    
    
      
        {
    {item}}
      
    
    
      
        
          {
    {item}}
        
      
      
        
          {
    {item}}
        
      
      
        
          {
    {item}}
        
      
      
        
          {
    {item}}
        
      
    
  
 
  
    {
    {inputContent || placeholder}}
    
      
        {
    {item}}
      
    
  

wxss源码

.keyboard{
  position:fixed;
  bottom:0;
  background:rgb(244,244,244);
  padding-bottom:20rpx;
  z-index:999;
}
.show{
  display: block;
}
.hide{
  display: none;
}
.inputBox{
  height:80rpx;
}
.inputBoxContent{
  margin:10rpx auto 0;
  height:70rpx;
  line-height:70rpx;
  width:690rpx;
  border-radius: 20rpx;
  background:rgb(255,255,255);
  padding-left:20rpx;
  overflow: hidden;
  font-size:36rpx;
}
.lightContent{
  color:#333;
}
.darkContent{
  color:rgb(166,166,166);
}
.keyboardTitle{
  width:750rpx;
  height:80rpx;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.keyboardTitle .keyboardTitleLogo{
  width:290rpx;
  text-align:center;
  color:rgb(166,166,166);
  margin:0 0 0 10rpx;
  height:70rpx;
  border-radius:20rpx;
  line-height:70rpx;
  background:white;
}
.keyboardTitle .keyboardTitleContent{
  width:140rpx;
  text-align:center;
  margin:0 0 0 10rpx;
  height:70rpx;
  border-radius:20rpx;
  line-height:70rpx;
}
.keyboardTitle .keyboardFinish{
  width:130rpx;
  margin:0 10rpx;
  height:70rpx;
  border-radius:20rpx;
  line-height:70rpx;
  text-align:center;
  background:white;
}
.keyboardContentOne{
  /* display:flex; */
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  /* background:white; */
}
.keyboardContentOneShow{
  display:flex;
}
.keyboardContentOneHide{
  display: none;
}
.keyboardContentTwo{
  /* display:flex; */
  /* background:white; */
}
.keyboardContentTwoHide{
  display: none;
}
.keyboardContentTwoShow{
  display: block;
}
.keyboardContentOneContent{
  background:white;
  width:88rpx;
  line-height:91rpx;
  text-align:center;
  margin:2rpx;
  border-radius: 6rpx;
}
.keyboardContentTwoLineOne , .keyboardContentTwoLineTwo , .keyboardContentTwoLineThree , .keyboardContentTwoLineFour{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.keyboardContentTwoLineOneContent,.keyboardContentTwoLineTwoContent,
.keyboardContentTwoLineThreeContent,
.keyboardContentTwoLineFourContent{
  background:white;
  width:71rpx;
  line-height:91rpx;
  text-align:center;
  margin:2rpx;
  border-radius: 6rpx;
}
.keyboardTwo{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.keyboardTwoContent{
  background:white;
  width:230rpx;
  margin:12rpx 6rpx 0;
  text-align: center;
  line-height: 100rpx;
  font-size:36rpx;
  border-radius: 10rpx;
}
.keyboardTitleContentColorWhite{
  background:white;
}
.keyboardTitleContentColorDark{
  background:rgb(222,222,222);
}
.keyboardContentDark{
  background:rgb(222,222,222);
}

js源码

Component({
  properties: {
    'isKeyboard':{
      type: Boolean,
      value: false
    },
    'keyboardType': {
      type: String,
      value: "keyboardOne"
    },
    'maxLength': {
      type: Number,
      value: ""
    },
    'minLength': {
      type: Number,
      value: ""
    },
    'test': {
      type: String,
      value: ""
    },
    'placeholder':{
      type: String,
      value: ""
    },
    'inputContent':{
      type: String,
      value: ""
    },
    'isKeyboardContent':{
      type: Boolean,
      value: true
    }
  },
  data: {
    categoryOne: '粤京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵川青藏琼宁渝✘'.split(''),
    categoryTwo: '1234567890'.split(''),
    categoryThree: 'QWERTYUIOP'.split(''),
    categoryFour: 'ASDFGHJKL'.split(''),
    categoryFive: 'ZXCVBNM✘'.split(''),
    categorySix: '123456789✘0✔'.split(''),
  },
  methods: {
    changeKeyboardContent(e){
      if (e.currentTarget.dataset.value == '省称'){
        this.setData({
          isKeyboardContent: true
        })
      }
      if (e.currentTarget.dataset.value == '英\数'){
        this.setData({
          isKeyboardContent: false
        })
      }
    },
    keyboard(e) {
      // console.log(e)
      if (e.target.dataset.value == undefined){
        return;
      }
      if (e.target.dataset.value == '✘') {
        if (this.data.inputContent.length > 0) {
          this.setData({
            inputContent: this.data.inputContent.substring(0, this.data.inputContent.length - 1)
          })
        }
        return
      }
      if (e.target.dataset.value == '✔'){
        if (this.data.minLength != '' && this.data.inputContent.length < this.data.minLength) {
          wx.showToast({
            title: '输入位数不得小于' + this.data.minLength + '位',
            icon: 'none'
          })
          return
        }
        let reg = new RegExp(this.data.test)
        if (this.data.test != '' && !reg.test(this.data.inputContent)) {
          wx.showToast({
            title: '不符合规则',
            icon: 'none'
          })
          return
        }
        this.triggerEvent('fwhfContent', {
          inputContent: this.data.inputContent
        })
        return
      }
      if (this.data.maxLength != '' && this.data.inputContent.length >= this.data.maxLength) {
        wx.showToast({
          title: '输入位数不得超过' + this.data.maxLength + '位',
          icon: 'none'
        })
        return
      }
      this.setData({
        inputContent: this.data.inputContent + e.target.dataset.value
      })
    }
  }
})