CoolInput :H5 INPUT 手机端 数字软键盘输入终极解决方案

最近做项目，发现H5弹出数字键盘有问题：

1.IOS下是无法自动弹出软键盘的，必须用户点击输入框才能弹出

2.弹出的数字软键盘没有小数点

这两个问题任何一个都是致命的。

所以必须自己制作一个假的弹出键盘，还要制作一个假的光标。

所以就花了1天时间写了一个完整的JS组件,里面用到了jquery. github地址如下：

https://github.com/HiYuChen/CoolInput

界面如下：

使用方法：

HTML：

<div style="text-align:center;">
       <div>First: INPUT</div><br />
       <div>
       <input type="text" id="amount" v-model="amount" style="font-family:Arial; font-size:40px;font-weight:bold; width:90%;"  />
       </div><br />
       <div>Second: DIV</div><br />
       <div id="amount1" v-model="amount1" style="text-align:left;display:inline-block; font-family:Arial;letter-spacing:0px; width:90%;height:90px;border-style:solid;border-color:#ddd;border-width:1px;font-size:80px;font-weight:bold;"></div>
       <button id="btnSubmit" style="margin-top:30px;width:80%; height:40px;background-color:#0d8;color:#fff;border-color:transparent;font-weight:bold;font-size:18px;" >Submit</button>
    </div>

v-model="amount" 用来绑定数据到输入框

JS:

 var data = {};
        var coolInput = new CoolInput({ slt: '#amount', data: data }); 
        coolInput.showPanel();
        var coolInput1 = new CoolInput({ slt: '#amount1', data: data });
        $('#btnSubmit').on('click', function () {
            alert('the data you entered is amount:'+data.amount+' and amount1:'+data.amount1);
        });

通过 v-model  可以配合vue 或者 WildWood 一起使用

里面有一个完整的测试页demo.html,在Chrome,Safari,Edge上测试成功，IE不行