JS Custom Mobile H5 Keyboard

When entering the license plate number, because many of the license plate numbers are mixed with numbers and letters, it is a bit cumbersome to switch numbers and letters frequently when using the input method.

Here we use a custom pop-up box instead of a keyboard.

1. First of all, to prevent the text box from popping up the input method, here I use readonly

<input class="selectCarBtn" readonly="readonly" type="text" placeholder="Enter the license plate number">

2. Next, you need a keyboard pop-up box. Here you make one with a div and lay it out as you like.The keyboards here are all written to death and can be looped out if necessary.

 1 <div class="popup OpacityUp popup-selectCarBox">
 2     <div class="btn">
 3         <div class="selectCarTit">
 4             <div class="closeSelectCarBox">cancel</div>
 5         </div>
 6         <div class="selectCarCon">
 7             <ul class="number">
 8                 <li>1</li>
 9                 <li>2</li>
10                 <li>3</li>
11                 <li>4</li>
12                 <li>5</li>
13                 <li>6</li>
14                 <li>7</li>
15                 <li>8</li>
16                 <li>9</li>
17                 <li>0</li>
18             </ul>
19             <ul class="english">
20                 <li>Q</li>
21                 <li>W</li>
22                 <li>E</li>
23                 <li>R</li>
24                 <li>T</li>
25                 <li>Y</li>
26                 <li>U</li>
27                 <li>I</li>
28                 <li>O</li>
29                 <li>A</li>
30                 <li>S</li>
31                 <li>D</li>
32                 <li>F</li>
33                 <li>G</li>
34                 <li>H</li>
35                 <li>J</li>
36                 <li>K</li>
37                 <li>P</li>
38                 <li>Z</li>
39                 <li>X</li>
40                 <li>C</li>
41                 <li>V</li>
42                 <li>B</li>
43                 <li>N</li>
44                 <li>M</li>
45                 <li>L</li>
46                 <li></li>
47                 <li class="key_ok">Determine</li>
48                 <li class="delect_back"></li>
49             </ul>
50         </div>
51     </div>
52 </div>

3. With the keyboard, add a click event to it.Here, a variable carNum is defined to hold the input value.

Primarily this deletion event, useCarNum.substr(0,CarNum.length- 1) to get the deleted value back.

 1 // Customize Keyboard Events
 2 $(".selectCarBtn").click(function(){
 3     $.popup(".popup-selectCarBox");
 4 });
 5 $(".closeSelectCarBox").click(function(){
 6     $.closeModal(".popup-selectCarBox");
 7 });
 8 $(".popup-selectCarBox").click(function(e){
 9     $.closeModal(".popup-selectCarBox");
10 })
11 $(".selectCarCon").click(function(e){
12     e.stopPropagation();
13 })
14 var carNum = "";
15 $(".selectCarCon li").not('.delect_back,.key_ok').click(function(){
16     carNum = carNum + $(this).html();
17     $(".selectCarBtn").val(carNum);
18 });
19 $(".selectCarCon li.delect_back").click(function(){
20     var num = carNum.substr(0, carNum.length - 1);
21     $(".selectCarBtn").val(num);
22     carNum = num;
23 });
24 $(".selectCarCon li.key_ok").click(function(){
25     $.closeModal(".popup-selectCarBox");
26 });

However, it is not perfect, and there are still some unresolved problems:

For example:

There is no cursor in the input box

How can I improve it???

Tags: Javascript

Posted on Thu, 04 Jun 2020 12:08:55 -0400 by WeAnswer.IT