vue.js初学—DIY移动端输入键盘_js ydui 移动端键盘-CSDN博客

本文链接：https://blog.csdn.net/Yvan_Lin/article/details/79154802

本文介绍了如何在Vue.js项目中创建一个自定义的移动端输入键盘，以限制用户输入并提供更好的用户体验。通过实例展示了HTML结构、数据绑定以及CSS样式的设置，特别是针对输入车牌号的场景。目前功能还在完善中，例如确保第二个字符必须为字母的判断逻辑。

摘要由CSDN通过智能技术生成

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