模拟键盘

手机端上不想要手机自带的键盘？

平板端不想手动点击键盘？

想要使用一个模拟的键盘。在一些点餐收款时经常用到。

方法也是很简单的，就是先把键盘上需要的内容，比如1 2 3。。。9 0 + - =  x这些按键都是button，并且点击的时候都会有个函数。然后在这些函数里面操作就可以啦。并且要注意

1.如果现在是0，

• 你再输入0，就只能显示一个0
• 你再输入非0，这个0就不显示啦

2.如果输入了一个小数点，你再输入小数点，就只能显示一个小数点

3.点击+的时候把刚才你输入的内容清了，再显示新输入相加的内容。

4.如果点击+之前你已经点过一次+了，也就是输入了两个数字，现在再点击+，也就是第三次点+就把上2个数字相加。

style样式：

#input{width:80%;height:40px;border:1px solid #ccc;line-height:40px;padding-right:15px;text-align: right;}
    button { margin: 3px 2px; width:21.5%;height: 65px; font-size: 22px; border: 1px solid #ccc; border-radius: 12px; background-color: #fff;}
    .btn0{width:45%;}
    .clear { padding: 0px; font-size: 14px; }
    .numberkeyboard { margin: 5px 3px; }

html内容：

            <div>
                <div id="input">请输入收款金额</div>  //注意这里用的div不是input type="text"因为input会自动的弹出手机上的键盘。如果你不想弹出就得用div模拟。但是这个可能没有光标啊。
            </div>
            
            
        <div class="numberkeyboard">
         <div>    
            <button type="button" class="btn btn-default" onclick="push(1)">1</button>
            <button type="button" class="btn btn-default" onclick="push(2)">2</button>
            <button type="button" class="btn btn-default" onclick="push(3)">3</button>
            <button type="button" class="btn btn-default " onclick="cancel()">x</button>
        </div>
        <div>
            <button type="button" class="btn btn-default" onclick="push(4)">4</button>
            <button type="button" class="btn btn-default" onclick="push(5)">5</button>
            <button type="button" class="btn btn-default" onclick="push(6)">6</button>
            <button type="button" class="btn btn-default" onclick="clearAll()">c</button>
          
        </div>
        <div>
            <button type="button" class="btn btn-default" onclick="push(7)">7</button>
            <button type="button" class="btn btn-default" onclick="push(8)">8</button>
            <button type="button" class="btn btn-default" onclick="push(9)">9</button>
            <button type="button" class="btn btn-default" onclick="add()">+</button>
        </div>
        
        <div>
            <button type="button" class="btn btn0 btn-default" onclick="push(0)">0</button>
            <button type="button" class="btn btn-default" onclick="point()">.</button>
            <button type="button" class="btn btn-default" onclick="equal()">=</button>
        </div>
    </div>

js；

var thistext="";//
        var beforetext="";//加之前的
        var flag=0;//判断加之前是否已有两个数
        var sum=0;//求和等于
            function push(i){
            if(thistext=="0"&&i==0)return;  //如果开始是0，再输入0就没有回应。
            if(thistext=="0")thistext="";   //如果开始是0在输入别的不是0的，就让开始的为空
            thistext+=i+"";
            $("#input").html(thistext);
            }
            
            
        function point(){
            if(thistext.indexOf('.')>-1)return;
            if(thistext=="")thistext="0";
            thistext+=".";
            $("#input").html(thistext);
        }
        
        function cancel(){
            thistext=thistext.substr(0,thistext.length-1);
             $("#input").html(thistext);
             //alert(thistext)
        }
        
       function clearAll(){
           flag=0;
           thistext="0";
           $("#input").html(thistext);
        }
       
       function add(){
           flag++;
           if(flag!=1){  //不是第一次加，就算结果
            equal();
           }
        beforetext=$("#input").html();
        thistext="";
       }
       
       function equal(){
           if(beforetext!=""){
                sum=parseFloat(beforetext)+parseFloat(thistext);
                $("#input").html(sum.toFixed(2));
           }
        else{$("#input").html(thistext)}
       }
      

这里有个插件。http://www.jq22.com/jquery-info480看不懂上面的童鞋可以直接使用插件。