輸入互動（一）
阿新 • • 發佈：2020-04-27
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <style>
9 .out{
10 width:40px;
11 height:40px;
12 background:#dd0000;
13 border-radius: 6px;
14 float:left;
15 margin-left:20px;
16 display: flex;
17 justify-content: center;
18 align-items: center;
19 }
20 .box{
21 width:26px;
22 height:26px;
23 border:2px solid #fff;
24 border-radius: 4px;
25 text-align: center;
26 color:#fff;
27 display: flex;
28 justify-content: center;
29 align-items: center;
30 }
31 .w{
32 background:transparent;
33 color:#fff;
34 width:100%;
35 height:100%;
36 text-align: center;
37 outline: none;
38 border:none;
39
40 }
41 </style>
42 <body>
43 <div class="out">
44 <div class="box"><input type="text" class="w"></div>
45 </div>
46 <div class="out">
47 <div class="box"><input type="text" class="w"></div>
48 </div>
49 <div class="out">
50 <div class="box"><input type="text" class="w"></div>
51 </div>
52 <div class="out">
53 <div class="box"><input type="text" class="w"></div>
54 </div>
55 <div class="out">
56 <div class="box"><input type="text" class="w"></div>
57 </div>
58 <div class="out">
59 <div class="box"><input type="text" class="w"></div>
60 </div>
61 <script>
62
63 let w = findClass('w');
64 let box = findClass('box');
65 // 第一次獲得游標
66 getFocus();
67 // 遍歷
68 loop(w,function(item,index){
69 item.oninput=function(){
70 writeAfter(this,box[index],index);
71 }
72 })
73 // 輸入之後
74 function writeAfter(obj,box){
75 let val=obj.value;
76 box.classList.add('x');
77 box.innerText=val;
78 getFocus();
79 }
80 // 找到物件
81 function findClass(clastr){
82 return document.getElementsByClassName(clastr);
83 }
84 // 獲取第一個物件的游標
85 function getFocus(){
86 let w = findClass('w');
87 if(w[0])
88 {
89 w[0].focus();
90 }
91 }
92 // 物件遍歷
93 function loop(obj,back)
94 {
95 let i = 0;
96 while(obj[i])
97 {
98 back(obj[i],i);
99 i++;
100 }
101 }
102 // 刪除操作
103 function deletePlay(){
104 window.onkeydown=function(ev)
105 {
106 if(ev.keyCode == 8)
107 {
108 let x=findClass('x');
109 let w=findClass('w');
110 loop(w,function(item){
111 item.blur();
112 })
113 x[x.length-1].innerHTML='<input type="text" class="w">';
114 x[x.length-1].className='box';
115 getFocus();
116 }
117 }
118 }
119 deletePlay();
120 </script>
121 </body>
122 </html>