H5 输入框text和number切换

这次的项目遇到一个关于输入金额的需求：input输入框聚焦时弹出数字键盘，只能输入数字，可以带两位小数，失去焦点时显示格式化后的金额，包含千分位和保留两位小数，如“12,000,000.00”。
看起来需求并不复杂，在做的过程中，发现难点在于 数字和格式化后的数字，这里关于输入框的type类型肯定是不一样的：

1.用户聚焦时谭树数字键盘，我们会用type=”number”类型；
2.显示格式化后的金额，因为要求有千分位(逗号),所以如果是type=number类型是肯定不行的，因为type=number不支持输入逗号，如果强行赋值会得到空值，如”12,000.00”,”1,” 会得到 “”，所以只能为type=text;
3.type=text和type=number切换导致软键盘弹不出；
4.软键盘弹出时，虽然聚焦了但是输入框没有在页面可视区域；

之前试过的方法：
1.聚焦时用js改变type属性

$("#input").on("focus",function(){
    $(this).prop("type","number");
});
$("#input").on("blur",function(){
    $(this).prop("type","text");
});

这种方法看起来没错，但是在有的设备上会有问题，在iPhone5上会出现再次聚焦时不会弹出数字键盘，而是文本键盘，原因在于聚焦时的上一次type为text（因为失去焦点变为text了）,弹出的键盘由上一次的type决定，所以弹出的是text键盘，然后才执行$(this).prop("type","number"); 这时候系统不会再自动切换键盘了。
*先执行focus事件，再执行click事件。
*focus事件执行后，会根据input的上一个type属性弹出相应的键盘，且用js改变type属性后，不会再次改变键盘。

2.采用touchstart,touchmove,touchend代替click执行事件
原因是 touch事件在focus事件前面执行，所以想法是在touch 的时候执行type类型的转换操作。后来发现也不行，在手指滑动的时候会出现input清空，原因是在text情况下获取的值可能为空。代码就不贴了，直接看最终解决办法吧。

最终选择方案：事件代理
原理：在input框的外面再套一层div，设置宽高和input一样，设置外层div的click事件为捕获模式，捕获模式会依次触发外层div到input目标元素的事件，这样我们可以在外层div的事件中设置里层input框的type属性，这样就可以保证type属性的变化是在input的focus事件之前执行。
代码如下：

<div id="input">
    <input type="text" id="aa" />
</div>
<script>
    document.getElementById("input").addEventListener("click",function(){
        $("#aa").prop("type","number").val(12);
        $("#aa").focus();
    },true);
    $("#aa").on("blur",function(){
        $("#aa").prop("type","text").val("12,000,000.00");
    });
</script>

需要注意的是：
1.`$(“#aa”).prop(“type”,”number”).val(12); 这里是赋历史值，如果是number类型里面注意放number类型的值，如果是格式化后的值，注意转换下。具体情况具体看。