手写移动端数字键盘

最新推荐文章于 2020-03-13 21:58:26 发布
weixin_30760895
最新推荐文章于 2020-03-13 21:58:26 发布
阅读量163
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/chengyunshen/p/8462078.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>自定义键盘输入</title>
</head>
<body>
<style>
        .box{
            width: 200px;
            height: 40px;
            border: 1px solid #dedede;
            padding-left: 5px;
            line-height: 40px;
            overflow: hidden;
        }
</style>
        <div class="box" contenteditable="true" ></div>

<style>
    body{
        margin: 0;
    }
    .keyboard{
        width: 100%;
        height:12rem;
        position: fixed;
        bottom: 0;
    }
    .keyboard .number{
        width: 75%;
        float: left;
        height: 100%;
        box-sizing: border-box;
    }
    .keyboard .fuc{
        box-sizing: border-box;
        width: 25%;
        height: 100%;
        float: left;
        border: 1px solid #666;
        border-left: none;
        text-align: center;
        line-height: ;
    }
    .keyboard .fuc .delinput{
        display: block;
        height: 25%;
        width: 100%;
        border-bottom: 1px solid #666;
        line-height: 3rem;
        box-sizing: border-box;
    }
    .keyboard .fuc .completeinput{
        line-height: 9rem;
        display: block;
    }
    .keyboard   .line{
        display: block;
        width: 100%;
        height: 25%;
    }
    .keyboard  .line  span{
        display: table-cell;
        vertical-align: middle;
        width:33.3333333%;
        height: 100%;
        border-top: 1px solid #666;
        border-left: 1px solid #666;
        text-align: center;
        box-sizing: border-box;
        float: left;
        font-size: 20px;
        font-weight: bold;
        line-height: 3rem;
    }

    .keyboard  .line  span:nth-child(3){
        border-right: 1px solid #666;
    }
    .keyboard  .line:last-child  span{
        border-bottom: 1px solid #666;
    }
    .keyboard  span:active{
            background-color: #3e50b4;
    }
</style>
        <div class="keyboard">

            <div class="number">
                <div  class="line">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>

                </div>
                <div  class="line">
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                </div>
                <div  class="line">
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </div>
            <div  class="line">
                <span>0</span>
                <span>.</span>
                <span></span>
            </div>
        </div>
            <div class="fuc">
                   <span class="delinput">删除</span>
                <span class="completeinput">完成</span>
            </div>
        </div>

<script>
           var input =  document.getElementsByClassName("box");
           keyboard(input,callback);

           //数字键盘逻辑
           var oldk=0;
            function  keyboard(el,calback){
                elem = el[0] ;
                var  oldv = el.innerHTML;
                var arr = document.querySelector(".keyboard").getElementsByTagName("span");
                arr = Array.prototype.slice.call(arr);
                  arr.forEach(function(element,index){
                       element.addEventListener("click",function (e) {
                           if(this.innerHTML == ".") {
                               if (oldk == 0) {
                                   oldk = 1;
                               } else if(oldk ==  1) {
                                    return ;
                               }
                           }else{
                               oldk = 0;
                           }
                            if(this.innerHTML == "完成"){
                                    if(elem.innerHTML == '' ||  elem.innerHTML == undefined){
                                        console.log("输入为空！")
                                    }else{
                                        console.log("输入完成~",elem.innerHTML);
                                        callback(elem.innerHTML);
                                    }
                            }else if(this.innerHTML == "删除"){
                                    if(elem.innerHTML == '' || elem.innerHTML == undefined) {

                                    }else{
                                        elem.innerHTML = elem.innerHTML.slice(0,elem.innerHTML.length-1);
                                    }
                            }else{
                                    if(oldv == undefined){
                                        elem.innerHTML =  this.innerHTML;
                                    }else{
                                        elem.innerHTML =compute(elem.innerHTML +  this.innerHTML);
                                    }
                                    oldv = elem.innerHTML;
                            }
                       })
                  })
            }
            function compute(number){
                    var tem = number.toString().split(".");
                    if(tem.length == 1 || (tem.length > 2 &&tem[1]==''  )){
                        return tem[0];
                    } else if(tem.length==2 && tem[1] =='' && tem[0] == ''){
                             return "0.";
                    } else if( tem.length==2 && tem[1] =='' && tem[0]!=='' ){
                            return tem[0]+".";
                    } else if(tem.length >=2 &&tem[1]!==''){
                        return tem[0]+"."+  (tem[1].length>=2?tem[1].substring(0,2) : tem[1]);
                    }
            }
           //数字键盘逻辑
            function callback(value){
            //    输入完成后的操作
                alert("输入的数据是："+value);
            }
</script>
</body>
</html>
转载于:https://www.cnblogs.com/chengyunshen/p/8462078.html