自制软键盘+支付密码

Posted 2020-10-26 heyujun-

在移动端支付密码或输入密码时需要弹出虚拟键盘，有些设备在键盘弹出时会把文本框挡住，为了兼容各种设备，所以需要自制软键盘来替代虚拟键盘。

以下是我自制的一个小demo，只能顺序输入和倒序清除，或全部清空；

*{ 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代码：

<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>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td class="empty">清空</td>
            <td>0</td>
            <td class="clear">清除</td>
        </tr>
    </table>
</div>

js代码：

$(document).ready(function(){
    var flag = [false,false,false,false]; //判断哪个文本框被激活,false表示未focus，true表示focus
    $.each($(\'td\'),function(index,el){   //遍历循环键盘按键是否被点击
        $(this).click(function(){
            if( $(this).html() == $(\'.clear\').html() ){  //判断是否按了清除按键
                $.each(flag,function(index,el){  //循环数组
                    if(el == true){
                        $(\'.txt input\').eq(index).val(\'\');
                        flag = [false,false,false,false];
                        if(index>0){
                            flag[index - 1] = true;
                        }
                    }
                });
                return false;
            }
            if($(this).html() == $(\'.empty\').html()){ //判断是否按了清空按键，文本框都清空并聚焦第一个文本框
                $(\'input\').val(\'\');
                $(\'.input1\').focus();
                return false;
            }
            if($(\'.input1\').val() == \'\'){
                flag = [true,false,false,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() == \'\'){
                            $(\'.input4\').val($(this).html());
                            flag = [false,false,false,true];
                            // 执行完成函数
                            var str = $(\'.input1\').val() + $(\'.input2\').val() + $(\'.input3\').val() + $(\'.input4\').val();
                            console.log(str);
                        }
                    }
                }
            }
        });
    });
    $.each($(\'.txt input\'),function(index,el){   //无论点击哪个文本框，都是激活第一个文本框
        $(this).click(function(){
            $(\'.input1\').focus();
        });
    });
});

效果图如下：