vue实现自定义身份证，数字键盘（光标，输入框，键盘）

已于 2022-06-01 15:21:09 修改
阅读量3.8k 收藏 9
点赞数 1
文章标签： javascript vue.js 开发语言
于 2021-10-29 09:46:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achhc/article/details/121027560
版权

vue实现自定义身份证，数字键盘（光标，输入框，键盘）

组件介绍

vue实现自定义身份证键盘（光标，输入框，键盘全手写）

组件代码

<template>
  <div
    class="myKeyboard"
    @click.stop="handleFocus"
    @blur="handleBlur"
    tabindex="0"
  >
    <div class="input-container">
      <div class="input-top">
        <div class="input-label" :style="labelStyle" :class="labelClass">
          {{ inputLabel }}
        </div>
        <div
          class="inputText"
          id="inputText"
          :style="inputStyle"
          :class="inputClass"
        >
          <span class="cursor">
            <span class="holder showWhite">|</span>
          </span>
          <span class="place-holder">{{ placeHolder }}</span>
          <span
            class="right-space"
            :style="{ color: zcolor }"
            @click="moveCursor"
            >占位</span
          >
          <span class="right-btn">
            <!-- <span v-if="clearShow" class="clear" @click="handleClear"> -->
            <img
              v-if="clearShow"
              class="clear"
              @click="handleClear"
              src="@/assets/keyboard/keyboard_clear.png"
              alt=""
            />
            <slot></slot>
          </span>
        </div>
      </div>

      <div class="error" :style="errorStyle" v-if="errorShow">
        {{ errorMessage }}
      </div>
      <div class="errorSpace" v-else></div>
    </div>
    <div class="number hidden" :class="numberClass" :style="numberStyle">
      <div class="mybtn" @click.stop="handleBlur">
        <img src="@/assets/keyboard/keyboard_down.png" alt="" />
      </div>
      <div class="mynum">
        <div class="num" @click="handleNum('1')">1</div>
        <div class="num" @click="handleNum('2')">2</div>
        <div class="num" @click="handleNum('3')">3</div>
        <div class="num" @click="handleNum('4')">4</div>
        <div class="num" @click="handleNum('5')">5</div>
        <div class="num" @click="handleNum('6')">6</div>
        <div class="num" @click="handleNum('7')">7</div>
        <div class="num" @click="handleNum('8')">8</div>
        <div class="num" @click="handleNum('9')">9</div>
        <div v-if="keyboard == 'card'" class="num" @click="handleNum('X')">
          X
        </div>
        <div v-if="keyboard == 'tel'" class="num" @click="handleNum('0')">
          0
        </div>
        <div class="num" @click="handleNum('0')">0</div>
        <div
          class="num"
          @click.stop="handleDelete"
          @touchstart="gtouchstart"
          @touchend="gtouchend"
          @touchmove="gtouchmove"
        >
          <img src="@/assets/keyboard/keyboard_del1.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // inputS: {
    //   type: String,
    //   default: '',
    // },
    // inputH: {
    //   type: String,
    //   default: '2.5rem',
    // },
    // inputB: {
    //   type: String,
    //   default: 'none',
    // },
    // inputW: {
    //   type: String,
    //   default: '',
    // },
    // inputBgc: {
    //   type: String,
    //   default: '#fff',
    // },
    // labelS: {
    //   type: String,
    //   default: '',
    // },
    // labelC: {
    //   type: String,
    //   default: '',
    // },
    // labelW: {
    //   type: String,
    //   default: '',
    // },
    // 输入框索引（必填字段）
    indexNum: {
      type: Number,
      default: 0,
    },
    // 是否聚焦（true:不聚焦，false:聚焦）
    numberDis: {
      type: Boolean,
      default: false,
    },
    // 是否必填（true:出现红星，false:不出现）
    required: {
      type: Boolean,
      default: false,
    },
    // 键盘类型（card:身份证，tel:数字）
    keyboard: {
      type: String,
      default: 'card',
    },
    // 父组件存的值
    oldValue: {
      type: String,
      default: '',
    },
    // 占位符颜色（建议设置和输入框背景同色）
    zcolor: {
      type: String,
      default: '#fff',
    },
    // label文字
    inputLabel: {
      type: String,
      default: '',
    },
    // 当输入框内无文字时显示
    placeHolder: {
      type: String,
      default: '请输入',
    },
    // 错误提示信息
    errorMessage: {
      type: String,
      default: '请输入正确的信息',
    },
    // 是否显示错误提示信息
    errorShow: {
      type: Boolean,
      default: false,
    },
    // 错误提示信息样式
    errorStyle: {
      type: Object,
      default: function () {
        return {}
      },
    },
    // 是否显示清除键
    clearShow: {
      type: Boolean,
      default: false,
    },
    // label动态类名
    labelClass: {
      type: String,
      default: '',
    },
    // label样式
    labelStyle: {
      type: Object,
      default: function () {
        return {}
      },
    },
    // input动态类名
    inputClass: {
      type: String,
      default: '',
    },
    // input样式
    inputStyle: {
      type: Object,
      default: function () {
        return {}
      },
    },
    // number类名
    numberClass: {
      type: String,
      default: '',
    },
    // number样式
    numberStyle: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      inputArea: '',
      stop: false,
      clickNum: false,
      show: false,
      value: '',
      inputValue: '',
    }
  },
  watch: {
    oldValue(val) {
      if (val != this.inputValue) {
        this.handleClear()
        this.handleOld()
      }
    },
    required(val) {
      this.handleRequired(val)
    },
  },
  created() {
    this.$toast.clear()
  },
  mounted() {
    this.handleRequired(this.required)
    this.handleOld()
  },
  methods: {
    // 是否必填
    handleRequired(val) {
      const inputLabel =
        document.getElementsByClassName('input-label')[this.indexNum]
      if (val) {
        inputLabel.className = 'input-label required'
      } else {
        inputLabel.className = 'input-label'
      }
    },
    // 父组件改变值
    handleOld() {
      // 获取父组件存的值后画数字
      if (this.oldValue != '') {
        for (const item of this.oldValue) {
          const span = document.createElement('span') //创建包含值的元素
          span.className = 'val'
          span.innerText = item
          const space = document.createElement('span')
          space.className = 'space'
          space.innerText = ''
          span.addEventListener('click', this.moveCursor)
          const cursor =
            document.getElementsByClassName('cursor')[this.indexNum]
          const inputArea =
            document.getElementsByClassName('inputText')[this.indexNum]
          inputArea.insertBefore(space, cursor) //插入空列
          inputArea.insertBefore(span, cursor) //插入值
        }
      }
      const placeHolder =
        document.getElementsByClassName('place-holder')[this.indexNum]

      if (this.oldValue == '') {
        placeHolder.className = 'place-holder'
      } else {
        placeHolder.className = 'place-holder hidden'
      }
      this.inputValue = this.oldValue
      this.$emit('keyboard-input', this.inputValue)
    },
    // 聚焦
    handleFocus(event) {
      if (!this.numberDis) {
        this.$emit('indexNum', this.indexNum)
        const number = document.getElementsByClassName('number')[this.indexNum]
        number.className = 'number'
        this.setCursorFlash()
        this.handleValue()
      }
    },
    //字符插入，在光标前插入字符
    handleNum(value) {
      const number = document.getElementsByClassName('number')[this.indexNum]
      number.className = 'number'
      const span = document.createElement('span') //创建包含值的元素
      span.className = 'val'
      span.innerText = value

      const space = document.createElement('span')
      space.className = 'space'
      space.innerText = ''
      span.addEventListener('click', this.moveCursor)
      const cursor = document.getElementsByClassName('cursor')[this.indexNum]
      const inputArea =
        document.getElementsByClassName('inputText')[this.indexNum]
      inputArea.insertBefore(space, cursor) //插入空列
      inputArea.insertBefore(span, cursor) //插入值
      this.handleValue()
    },
    // 失焦
    handleBlur(e) {
      clearInterval(this.intervalId)
      const placeHolder =
        document.getElementsByClassName('holder')[this.indexNum]
      placeHolder.className = 'holder showWhite'
      const number = document.getElementsByClassName('number')[this.indexNum]
      number.className = 'number hidden'
      const inputText =
        document.getElementsByClassName('inputText')[this.indexNum]
      inputText.className = 'inputText'
      this.handleValue()
      const inputArea =
        document.getElementsByClassName('inputText')[this.indexNum]
      const reset =
        document.getElementsByClassName('place-holder')[this.indexNum]
      const cursor = document.getElementsByClassName('cursor')[this.indexNum] //获取光标
      const ele = inputArea.replaceChild(reset.previousSibling, cursor)
      inputArea.insertBefore(ele, reset)
    },
    // 移动光标位置
    moveCursor(event) {
      const inputArea =
        document.getElementsByClassName('inputText')[this.indexNum]
      const cursor = document.getElementsByClassName('cursor')[this.indexNum] //获取光标
      if (event.currentTarget.className == 'right-space') {
        const ele = inputArea.replaceChild(
          event.currentTarget.previousSibling.previousSibling,
          cursor,
        )
        inputArea.insertBefore(ele, event.currentTarget.previousSibling)
      } else {
        const tempEle = event.currentTarget
        const nodeName = event.currentTarget.nextSibling.nodeName
        const temp = event.currentTarget.previousSibling
        const ele = inputArea.replaceChild(temp, cursor) //把光标替换成当前元素
        inputArea.insertBefore(ele, event.currentTarget)
      }
    },
    // 删除
    handleDelete() {
      const inputArea =
        document.getElementsByClassName('inputText')[this.indexNum]
      //   this.setCursorFlash()
      const cursor = document.getElementsByClassName('cursor')[this.indexNum]
      let n = 2 //两个删除动作
      while (cursor.previousSibling && n > 0) {
        inputArea.removeChild(cursor.previousSibling)
        n--
      }
      this.handleValue()
    },
    //开始按
    gtouchstart(e) {
      this.timeOutEvent = setTimeout(() => {
        this.longPress()
      }, 500)
      return false
    },
    gtouchend() {
      clearTimeout(this.timeOutEvent)
      clearInterval(this.press)
      if (this.timeOutEvent != 0) {
        // alert('你这是点击，不是长按')
      }
      return false
    },
    gtouchmove() {
      clearTimeout(this.timeOutEvent)
      clearInterval(this.press)
      this.timeOutEvent = 0
    },
    longPress() {
      this.timeOutEvent = 0
      this.press = setInterval(() => {
        this.handleDelete()
      }, 300)
    },
    //设置光标定时任务
    setCursorFlash() {
      const placeHolder =
        document.getElementsByClassName('holder')[this.indexNum]
      let isShowCursor = false
      if (this.intervalId) {
        clearInterval(this.intervalId)
      }
      this.intervalId = setInterval(function () {
        isShowCursor = !isShowCursor
        if (isShowCursor) {
          placeHolder.className = 'holder'
        } else {
          placeHolder.className = 'holder showWhite'
        }
      }, 500)
    },
    // 全清
    handleClear() {
      const father = document.getElementsByClassName('inputText')[this.indexNum]
      const child =
        document.getElementsByClassName('inputText')[this.indexNum].childNodes
      for (let i = child.length - 1; i >= 0; i--) {
        if (child[i].className == 'val' || child[i].className == 'space') {
          father.removeChild(child[i])
        }
      }
    },
    // 获取值
    handleValue() {
      const val = document
        .getElementsByClassName('inputText')
        [this.indexNum].querySelectorAll('.val')
      const arr = []
      arr[this.indexNum] = []
      for (let i = 0; i < val.length; i++) {
        arr[this.indexNum].push(val[i].innerHTML)
      }
      this.inputValue = arr[this.indexNum].toString()
      this.inputValue = this.inputValue.split(',').join('')
      this.$emit('keyboard-input', this.inputValue)
      const placeHolder =
        document.getElementsByClassName('place-holder')[this.indexNum]

      if (this.inputValue == '') {
        placeHolder.className = 'place-holder'
      } else {
        placeHolder.className = 'place-holder hidden'
      }
    },
  },
}
</script>

<style scoped lang="less">
.myKeyboard:focus {
  outline: none;
}
.input-container {
  display: flex;
  // align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
  padding-bottom: 0.2rem;
  width: 100%;
  border-bottom: 1px solid #eee;
  background: #fff;
  font-size: 1.04rem;
  .acitve {
    border: 1px solid #2e8fff !important;
  }
  .input-top {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
  }
  .error {
    color: #ee0a24;
    font-size: 0.75rem;
  }
  .errorSpace {
    width: 1rem;
    height: 1.2rem;
  }
  .required::before {
    position: absolute;
    left: 0.5rem;
    color: #ee0a24;
    content: '*';
    font-size: 0.875rem;
  }
  .inputText {
    position: relative;
    flex: 1;
    width: 80%;
    border: none;
  }
  .right-btn {
    position: absolute;
    right: 2%;
    .clear {
      width: 1.5rem;
    }
    // :nth-child(1) {
    //   width: 1.5rem;
    // }
    :nth-child(2) {
    }
  }

  .right-space {
    // color: #fff;
  }
  .place-holder {
    color: #c8c8c8;
  }
}
.number {
  position: fixed;
  bottom: 0;
  z-index: 999999;
  padding-bottom: 2%;
  width: 100%;
  background-color: #f0f0f0;
  font-size: 2rem;
  .mybtn {
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    img {
      height: 100%;
    }
  }
  .mynum {
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 2rem);
    .num {
      display: flex;
      align-items: center;
      flex: 1 0 30%;
      justify-content: center;
      height: 3.4rem;
      border-top: 1px solid #eee;
      border-left: 1px solid #eee;
      background-color: #fff;
      text-align: center;

      &:active {
        background-color: rgb(202, 202, 202);
      }
      img {
        // height: 100%;
        pointer-events: none;
      }
    }
  }
}
.hidden {
  display: none;
}
.showWhite {
  color: #fff;
}
</style>

效果图

在这里插入图片描述

组件使用

引用

和正常引用组件的操作相同


import number from '文件地址'
export default {
	components:{
		number
	},
	data() {
		return {
			indexNum: 0, //必填字段，为键盘索引，每个键盘必须具有唯一值
			oldValue: '' //从父组件传递给子组件的值
		}
	},
	methods:{
		handleKeyBoard(value) {
			//value为在输入框里面输入的值
		    console.log(value)
			this.oldValue = value
	    },
	}
}

使用

<number
	:index-num="indexNum"
	@keyboard-input="handleKeyBoard"
	:old-value="oldValue"
>
</number>

参数介绍

参数说明
indexNum输入框索引（必填字段），Number，默认0
oldValue父组件传的输入框值（必填字段），String
keyboard键盘类型，String，（card:身份证，tel:数字）默认card
zcolor占位符颜色（建议设置和输入框背景同色），String，默认#fff
inputLabellabel文字，String
placeHolder当输入框内无文字时显示，String，默认请输入
errorMessage错误提示信息，String，默认请输入正确的信息
errorShow是否显示错误提示信息，Boolean，默认false
errorStyle错误提示信息样式，Object
clearShow是否显示清除键，Boolean，默认false
labelClasslabel动态类名，String
labelStylelabel样式，Object
inputClass输入框动态类名，String
inputStyle输入框样式，Object
numberClass键盘类名，String
numberStyle键盘样式，Object
numberDis是否聚焦，Boolean
required是否必填，（true:出现红星，false:不出现），Boolean

方法

事件说明
keyboard-input输入框输入事件，回调参数为输入框内输入的值，每次改变值均调用

插槽

标签说明
slot组件内已预留插槽，可根据自己的需要在输入框内添加自己的标签
阿铭同学
关注
Vue输入框快速调出数字键盘
qq_36811160的博客
04-20 1654
<input type="tel" placeholder="请填写真实电话" v-model="form.tel" pattern="[0-9]*">
用VUE实现一个数字小键盘组件
pinke的博客
06-26 518
用VUE实现一个数字小键盘组件,实现按#号发送事件,及以显示键盘位置做个参数可根据鼠标点击显示。
组件式输入框
最新发布
m0_66757598的博客
08-21 233
例： 将人员选择Input框做成一个组件。
使用Vue自定义数字键盘组件(体验度极好)
08-28
最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话 体验很不好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本
vue自定义数字键盘
m0_53912016的博客
03-10 4428
输入框快速调出数字键盘 <input type="tel" pattern="[0-9]*">或者 <input type="num" pattern="[0-9]*"> 自定义数字键盘 封装的插件
vue实现数字键盘
qq_50616838的博客
02-26 535
【代码】vue实现数字键盘。
vuecalculation基于vue的自定义数字键盘的实现
08-09
vue-calculation：基于vue的自定义数字键盘的实现
Vue Components 数字键盘的实现
10-16
Vue Components 数字键盘的实现是前端开发中常见的一种需求，特别是在移动设备上输入数字时，为了提高用户体验，通常会自定义一个数字键盘替代系统默认的全键盘。在Vue.js框架中，我们可以创建一个可复用的组件来...
wckeyboard基于vue封装的一个自定义数字键盘
08-10
本项目“wckeyboard”就是基于Vue.js进行封装的一个自定义数字键盘组件，其目标是模仿大众点评闪惠买单中的价格输入键盘，为用户提供更友好的交互体验。 1. **Vue.js组件化开发**： Vue.js的核心理念之一是组件化...
vue.js实现只能输入数字的输入框
10-16
总结来说，使用Vue.js创建只能输入数字的输入框可以通过几种方式实现：直接在Vue实例中使用`watch`监听器和`v-model`数据绑定，通过创建自定义Vue组件来实现输入限制，并通过添加自定义属性来指定绑定的数据。...
vue数字虚拟键盘组件
08-10
A Vue component to num-keyboard 一个虚拟数字键盘插件
一个vue手机虚拟支付数字键盘插件
08-10
⌨️ 一个vue手机虚拟支付数字键盘插件
vue中实现纯数字键盘
明思齐的博客
12-01 1515
的子数组，从索引0开始，到倒数第一个元素（不含倒数第一个元素）结束。的最后一个字符，并将剩余的部分赋值给。
vue 数字键盘
NOyesNONO_的博客
12-30 820
<!-- 键盘--> <input type="text" class='get-num' :value="num"> <div class="keyboard" @click.stop="clickKeyBoard"> <span class="key-item" v-for="(item,index) in 9" :key="index" :data-num="index+1">{{in
vue 自定义键盘组件_我劝你别在数字键盘上刁难我——Vue自定义数字键盘组件...
weixin_39552304的博客
01-14 468
Vue自定义数字键盘前言最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话 体验很不好，天天催着我找时间优化，原生控件还有优化个毛线，回去等死吧~绝望既然要用户体验，而我又对原生控件感到很绝望，于是！我有一个大胆的想法....我们自己动手写一个！废话不多说，先上效果图吧~效果图效果图具体实现布局排版请输入金额{{ money }}789C456清...
推荐一款Vue.js实现的数字键盘组件——Vue-Number-Keyboard
gitblog_00072的博客
04-20 1019
推荐一款Vue.js实现的数字键盘组件——Vue-Number-Keyboard 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个由Vue.js构建的轻量级、可自定义的数字输入键盘组件。它特别适合用于移动设备上的金融、密码或数量输入场景，确保数据安全并提供优秀的用户体验。 技术分析 基于Vue.js Vue.js是一个流行的前端框架，以其简单易学、组件化开发和高效...
数字键盘添加自定义按钮(转自cocoachina)
iOS 移动开发
05-08 1332
项目需要对数字键盘做个性化设置，网上找了几个例子，学习了下，然后总结了一下：   数字键盘   身份证键盘   主要的代码如下 1.- (void)addButtonToKeyboardWithSelector:(SEL)sel normal:(UIImage*)nimg highlight:(UIImage*)himg{ 2.     // c
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值