Self-made soft keyboard + payment password, self-made payment Password

Self-made soft keyboard + payment password, self-made payment Password

A virtual keyboard needs to be displayed when the mobile terminal pays for the password or enters the password. Some devices will block the text box when the keyboard pops up. To be compatible with various devices, you need to make a soft keyboard to replace the virtual keyboard.

The following is a self-developed demo, which can only be cleared in sequence and in reverse order, or all;

*{ padding: 0;margin: 0; }body{ font-family: 'Microsoft Yahei';background-color: #f5f5f5; }input{ outline: none;background: none;border:0; }.txt{ width: 14rem;height: 3.5rem;border: 1px solid #dcdcdc;font-size: 0;margin: 8rem auto 0;background-color: #fff; }.txt input{ width: 3.5rem;height: 3.5rem;border-right: 1px solid #eee;box-sizing: border-box;text-align: center;font-size:  1.5rem; }.input4{ border-right: 0 !important; }.key-tab{ width: 100%;background-color: #fff;position: fixed;bottom: 0; }.key-tab tr{ display: flex;height: 3rem;line-height: 3rem;font-size: 0; }.key-tab tr td{ flex:1;text-align: center;font-size: 1.5rem;border-right: 1px solid #f5f5f5;box-sizing: border-box;border-bottom: 1px solid #f5f5f5; }.key-tab tr td:nth-of-type(3){ border-right: 0; }.key-tab tr td:active{ background-color: #eee; }

Html code:

<Div class = "txt"> <input type = "text" class = "input1" readonly name = ""> <input type = "text" class = "input2" readonly name = ""> <input type = "text" class = "input3" readonly name = ""> <input type = "text" class = "input4" readonly name = ""> </div> <div class = "keyboard"> <table class = "key-tab"> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> <td class = "empty"> clear </td> <td> 0 </td> <td class = "clear"> clear </td> </tr> </table> </div>

Js Code:

$ (Document ). ready (function () {var flag = [false, false]; // determines which text box is activated. false indicates that focus is not performed, and true indicates focus $. each ($ ('td '), function (index, el) {// print whether the cyclically typed keyboard is clicked $ (this ). click (function () {if (condition (this).html () = condition ('.clear'{.html () {// determine whether the Clear button is pressed $. each (flag, function (index, el) {// loop array if (el = true) {then ('.txt input '). eq (index ). val (''); flag = [false, false]; if (index> 0) {flag [index-1] = true ;}}}); return false;} if({(this}.html () ==(('.empty'{.html () {// determines whether the Clear button is pressed. The text box is cleared and the first text box $ ('input') is focused '). val (''); $ ('. input1 '). focus (); return false;} if ($ ('. input1 '). val () = '') {flag = [true, false]; ('.input1'{.val({(this}.html ();} else {if ($ ('. input2 '). val () = '') {flag = [false, true, false, false]; ('.input2'{.val({(this}.html ();} else {if ($ ('. input3 '). val () = '') {flag = [false, false, true, false]; ('.input3'{.val({(this}.html ();} else {if ($ ('. input4 '). val () = '') {response ('.input4'{.val(%(this%.html (); flag = [false, true]; // run the completed function var str =$ ('. input1 '). val () + $ ('. input2 '). val () + $ ('. input3 '). val () + $ ('. input4 '). val (); console. log (str) ;}}}}) ;}); Metrics .each((('.txt input'), function (index, el) {// no matter which text box you click, activate the first text box $ (this ). click (function () {$ ('. input1 '). focus ();});});});

As follows: