vue,原生html—input框输入银行卡4位分开、手机号344分隔

vue,原生html—input框输入银行卡4位分开、手机号344分隔1.uni-app写input框（注意type类型不能为number，这是一个坑，我理解到-数字框只能输入数字不能显示空格哦~）//输入银行卡<input class="uni-input" v-model="card" @input="onInput" @keyup="onInput" @paste="onInput"

Uxiao7

3688人浏览 · 2020-12-17 17:14:20

Uxiao7 · 2020-12-17 17:14:20 发布

vue,原生html—input框输入银行卡4位分开、手机号344分隔

效果图:
在这里插入图片描述
1.uni-app写input框 （注意type类型不能为number，这是一个坑，我理解到-数字框只能输入数字不能显示空格哦~）

//输入银行卡
<input class="uni-input" v-model="card" @input="onInput" @keyup="onInput" @paste="onInput"  type="text"  />
//输入手机号
<input v-model="tall" type="tel" ref="mobile" maxlength="13" @input="onCallInput" @keyup="onCallInput" @paste="onCallInput" />

<script>
    export default {
        data() {
            return {
				card:'', //银行卡
				tall: '' //手机号
            }
        },
        methods: {
        //操作手机号
        onCallInput: function(event) {
				let value = event.target.value.replace(/\D/g, '').substr(0, 11) // 不允许输入非数字字符，超过11位数字截取前11位
				let len = value.length
				if (len > 3 && len < 8) {
					value = value.replace(/^(\d{3})/g, '$1 ')
				} else if (len >= 8) {
					value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
				}
				this.tall = value
			},
			//操作银行卡
			onInput: function(event) {
			    // this.card = event.detail.value
				this.card = this.card.replace(/\D/g, '') // 不允许输入非数字字符
			    this.card = this.card.replace(/(\d{4})(?=\d)/g, '$1 ') // 4位
				console.log(this.card)
		        }
          }
    }

2.HTML框写input，银行卡4个数字为1个间隔，直接使用的可以
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="inputDom" />
    <script type="text/javascript">
        var inputDom = document.getElementById('inputDom');
        var maxLen = 0;
        inputDom.oninput = function() {
            var value = this.value;
            var valueLen = value.length;
            var foucsNum = getCursortPosition(inputDom);
            if(valueLen > 0){  
                var c = value.replace(/\s/g,  "");  
                var Len = c.length;
                var List = c.split('');
                var initNum = 0;
                for(var i=1;i<Len;i++) {
                    if(i%4 == 0) {　　//每四位分一组
                        List.splice(i+initNum,0,' ');　　//此处为使用空格分隔
                        initNum++
                    }
                }
                this.value  = List.join('');

                if(maxLen < this.value.length) {
                    if(foucsNum%5 == 0) {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum+1)
                        },0);
                    }else {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum)
                        },0);
                    }
                }else {
                    if(foucsNum%5 == 0) {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum-1)
                        },0);
                    }else {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum)
                        },0);
                    }
                }
                maxLen = this.value.length;
            }
        }
　　　　　//控制光标移动时，需要使用定时器，避免出现光标控制失效的情况
        function getCursortPosition(ctrl) {        //获取光标的位置
            var CaretPos = 0;   // IE Support
            if (document.selection) {
                ctrl.focus();
                var Sel = document.selection.createRange();
                Sel.moveStart ('character', -ctrl.value.length);
                CaretPos = Sel.text.length;
            }
            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                CaretPos = ctrl.selectionStart;
            return (CaretPos);
        }

        function setCaretPosition(ctrl, pos) {        //设置光标的位置
            if(ctrl.setSelectionRange){
                ctrl.focus();
                ctrl.setSelectionRange(pos,pos);
            }
            else if (ctrl.createTextRange) {
                var range = ctrl.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }
    </script>
</body>
</html>

1.什么是@keyup
@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件
事件代码事件描述
@keyup.enter 回车按键松开
@keyup.left 左键按键松开
@keyup.right 右键按键松开
@keyup.up 上键按键松开
@keyup.down 下键按键松开
@keyup.delete 删除键松开
2.什么是@paste
当用户在浏览器用户界面发起“粘贴”操作时，会触发paste事件。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^