Vue. js beginner-DIY mobile terminal Input Keyboard, vue. js beginner diy keyboard

Vue. js beginner-DIY mobile terminal Input Keyboard, vue. js beginner diy keyboard

In the process of project development, we need users to input something, but we are not willing to allow users to enter anything at will. Therefore, we may choose to use a custom input method, to restrict user input, let's take a simple example to see how to set input methods on mobile Web pages. Here we still use our old friend Vue for implementation.

First, let's take a look at what is needed in html code. Here, we use an input license plate number as an example. The introduction of vue and mobile terminal settings are not mentioned here.

<Div id = "main"> <div class = "carNumber" v-touch: tap = "onTypewriting"> <input type = "text" v-model = "carNumber" maxlength = "8" readonly> <! -- ① An input box --> </div> <span v-touch: tap = "onOfferTap" class = "cherkBtn"> OK </span> <! -- ② OK button --> <div class = "typer" v-show = "showTyper! = 0 "> <! -- ③ Enter the keyboard --> <ul v-show = "showTyper = 1"> <! -- ④ Provincial input --> <li class = "typer-pro" v-for = "item in provinces": class = "{'is-closeType ': item = 'offset'} "v-touch: tap =" input (item) ">{{ item }}</li> </ul> <ul v-show =" showTyper = 2 "> <! -- ⑤ Enter letters and numbers --> <li class = "typer-num" v-for = "item in keyNums": class = "{'is-': item = 'A', 'is-OK ': item =' OK ', 'is-Del': item = 'del '} "v-touch: tap = "input (item)" >{{ item }}</li> </ul> </div>

① Here, v-touch: tap is used to trigger a click event, which can be understood as v-on: click. Secondly, there will be a readonly in this input, this is to make the input read-only, so that the input method keyboard in the system cannot be displayed when you click

② OK button: used to check whether the input is valid.

③ Whether or not the Input Keyboard pops up and what Input Keyboard pops up is determined by the data of showTyper.

④ Enter the license plate number in two parts: province and alphanumeric characters. Therefore, we need to set two keyboards.

Next we will make a general css style. Here we will focus on the keyboard.

.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;}

The last few classes that contain "is-" are used to beautify our keyboard. In the preceding html, we also use v-bind: class alignment makes judgment and binding, and the next major hit is the JS part.

Var main = new Vue ({el: '# main', data: {showTyper: 0, // input method value. 0 indicates no display, and 1 indicates Saving Input Keyboard, 2. Enter the keyboard provinces: ["Beijing", "Shanghai", "zhe", "Su", "Guangdong", "Lu", "Jin ", "Ji", // Province "yu", "Chuan", "Yu", "liao", "Ji", "", "Wan", "E ", "Jin", "", "Cloud", "Gui", "Qiong", "Qing", "new", "Zang", "Meng", "Ning ", "Gan", "Shaanxi", "min", "Gan", "Xiang", "disabled"], keyNums: ["0", "1", "2 ", "3", "4", "5", "6", "7", "8", "9", // number Letter "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: '', // input value}, methods: {onOfferTap: function () {// determine the final result var carNumberReg =/^ {1} [A-Z] {1} [A-Z0-9] {4} [A-Z0-9 school police Hong Kong and Macao] {1} $ /; if (! CarNumberReg. test (this. carNumber) {_ g. toast ('Enter the correct license plate number'); return ;}}, onTypewriting: function () {// when you click the input box, the keyboard this is displayed. showTyper = 1; this. changeTyper () ;}, changeTyper: function () {// determines the status of the entered license plate number. Is it blank? Have you entered the first value (I .e., Province )? Enter the value after saving? If (this. carNumber. length> = 1) {this. showTyper = 2;} if (this. carNumber. length = 0) {this. showTyper = 1 ;}}, input: function (item) {// keyboard click event, input the value of the keyboard itself if (item = 'OK' | item = 'close') {// determines whether the close button is clicked this. showTyper = 0; return;} if (item = 'del ') {// determine whether the delete button is clicked this. carNumber = this. carNumber. slice (0,-1); this. changeTyper (); return;} if (this. carNumber. length <7) {// judge whether the number of current license plate numbers is valid. If the number of license plate numbers does not exceed 7, enter this. carNumber = this. carNumber + item; this. changeTyper ();} else {_ g. alert ('license plate number out of normal range ');}}}});

The code in js has provided comments for ease of understanding. I will not repeat them one by one. The general effect is as follows, because it is intercepted from the actual project and there will be a slight deviation.

Features not yet completed:

Generally, the second input must be a letter, which is not aligned here for judgment.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger. Http://blog.csdn.net/Yvan_Lin/article/details/79154802