vue.js初学—DIY移动端输入键盘

在项目开发的过程中呢，我们需要用户输入一些东西，但又不愿意让用户随意的进行输入，因而可能会选择使用一个自定义的输入法，来限制用户输入的东西，那么接下来，我们就通过一个简单的例子，来看看，移动端网页中，输入法该怎么去设置。这里我们依旧使用了我们的老朋友Vue，来进行实现。

首先我们来看一下html代码中，需要些什么。在这里呢，我们用一个输入车牌号作为例子，首先vue的引入和移动端的设定在这里就不说啦

<div id="main">
    <div class="carNumber" v-touch:tap="onTypewriting">
        <input type="text" v-model="carNumber" maxlength="8" readonly> <!-- ①一个输入框 -->
    </div>
    <span v-touch:tap="onOfferTap" class="cherkBtn">确定</span> <!-- ②确定按钮 -->
    <div class="typer" v-show="showTyper!=0"> <!-- ③输入键盘 -->
        <ul v-show="showTyper==1"> <!-- ④省的输入 -->
            <li class="typer-pro" v-for="item in provinces" :class="{'is-closeType':item=='关闭'}" v-touch:tap="input(item)">{{item}}</li>
        </ul>
        <ul v-show="showTyper==2"> <!-- ⑤字母数字的输入 -->
            <li class="typer-num" v-for="item in keyNums" :class="{'is-A': item=='A','is-OK':item=='OK','is-Del':item=='Del'}" v-touch:tap="input(item)">{{item}}</li>
        </ul>
    </div>
</div>

①这里的v-touch:tap，是做好的一个触发点击事件用的，可以理解为v-on:click；其次在这个input里面呢，会有一个readonly，这个是让这个input只读，从而做到点击的时候无法弹出系统中的输入法键盘

②确定按钮：用于最后检测这个的输入是否的合法的

③输入键盘是否弹出，以及弹出什么输入键盘，是由showTyper这个data决定的

④⑤输入车牌号由两部分构成：省份和数字字母，因而我们需要设置两个键盘

那么接下来我们就来做一个大概的css样式，这里我们主要放在键盘上

.typer {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    height: 3.5rem;
    width: 100%;
    padding-top: .1rem;
}

.typer li {
    float: left;
    height: .7rem;
    margin: .1rem .05rem 0;
    color: #333;
    text-align: center;
    font-size: .32rem;
    line-height: .7rem;
    background-color: #ccc;
    -webkit-border-radius: .1rem;
    -moz-border-radius: .1rem;
    border-radius: .1rem;
}

.typer li.typer-pro {
    width: .62rem;
    padding: 0 .15rem;
}

.typer li.typer-pro.is-closeType {
    width: 1.2rem;
    float: right;
}

.typer li.typer-num {
    width: .62rem;
    padding: 0 .1rem;
}

.typer li.typer-num.is-A {
    margin-left: .31rem;
}

.typer li.typer-num.is-OK {
    width: .8rem;
    margin-left: .1rem;
}

.typer li.typer-num.is-Del {
    width: 1rem;
}

主要是最后的几个含有“is-”的几个类，对我们的键盘做一个美化的作用，而在上面的html中，我们也用v-bind:class对齐做了判断和绑定，接下来重头戏来了，JS部分

    var main = new Vue({
        el: '#main',
        data: {
            showTyper: 0,    //输入法的值，0表示不显示，1表示显示省输入键盘，2表示显示数字字母输入键盘
            provinces:["京","沪","浙","苏","粤","鲁","晋","冀",    //省
                "豫","川","渝","辽","吉","黑","皖","鄂",
                "津","贵","云","桂","琼","青","新","藏",
                "蒙","宁","甘","陕","闽","赣","湘","关闭"],
            keyNums:["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",
                "OK","Z","X","C","V","B","N","M","Del"],
            carNumber:'',    //输入的值

        },
        methods: {
            onOfferTap: function () {   //对最终结果进行判断
                var carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                if (!carNumberReg.test(this.carNumber)) {
                    _g.toast('请输入正确的车牌号码');
                    return;
                }
            },
            onTypewriting:function () {    //点击输入框时，弹出键盘
                this.showTyper = 1;
                this.changeTyper();
            },
            changeTyper:function () {    //判断输入的车牌号处于什么状态，为空？已输入第一个值（即省）？输入省之后的值？
                if(this.carNumber.length>=1){
                    this.showTyper = 2;
                }
                if(this.carNumber.length==0){
                    this.showTyper = 1;
                }
            },
            input:function (item) {    //键盘点击事件，传入键盘本身的值
                if(item=='OK'||item=='关闭'){    //判断是否点击了关闭按钮
                    this.showTyper = 0;
                    return;
                }
                if (item=='Del'){    //判断是否点击了删除按钮
                    this.carNumber = this.carNumber.slice(0,-1);
                    this.changeTyper();
                    return;
                }
                if(this.carNumber.length<7){    //判断当前的车牌号的数目是否合法，还未超出7位则可继续输入
                    this.carNumber=this.carNumber+item;
                    this.changeTyper();
                }else {
                    _g.alert('车牌号码超出正常范围');
                }
            }
        }
    });

js里的代码都已提供了注释，方便理解，不再一一赘述，大致的效果如下，因为是从实际的项目中截取下来，稍微会有许些偏差

尚未完善功能：

一般输入的第二个必须是字母，在此还未对齐进行判断

vue.js初学—DIY移动端输入键盘

猜你喜欢