解决移动端input中placeholder无法垂直居中的问题

在项目中遇到在移动端中placeholder属性无法实现垂直居中的问题，解决方案如下：

问题原因：input的placeholder属性由于对于各个浏览器的兼容性不同，在ios浏览器文字靠上，而在andrio浏览器中却文字靠下

解决办法：可以使用span标签代替placeholder属性，结合js的方法模拟实现

代码如下：

HTML代码：

<div class="order-pay-money">
<input type="text" class="money" id="money">
            <span id="replacePlaceholder">咨询服务员后输入</span>
<input type="hide" id="hide">
</div>

CSS代码：

.money{
     position:relative;
}
#replacePlaceholder{
    position:absolute;
    font-size:1.3rem;
    color:#dadada;
    right:38px;
    height:52px;
    line-height:52px;
    padding:0;
}

JS代码：

 mui(".order-pay-money").on("input","#money",function(){
        var obj=this;
        withdrawMoney(obj);
    });
mui(".order-pay-money").on("tap","#replacePlaceholder",function(){
        $$("#money").focus();
    });
function withdrawMoney(obj){
        if (obj.value == "") {
            $$("#replacePlaceholder").show();
            $$(".order-bottom-btn").find(".pay-btn").removeClass("canClick");
            document.getElementById("hide").value = obj.value;
        } else if (/^[1-9]\d{0,3}\.?\d{0,2}$/.test(obj.value) || /^0\.\d{0,2}$/.test(obj.value) || /^0\.?$/.test(obj.value)) {
            $$("#replacePlaceholder").hide();
            $$(".order-bottom-btn").find(".pay-btn").addClass("canClick");
            document.getElementById("hide").value = obj.value;
            var suffice=Number($$(".suffice").find("i").text());
            var discountPercent=$$(".discount").find("i").text();
            var remaining=Number($$(".wxy-remaining").text());
            var discountPrice=(obj.value * discountPercent/100).toFixed(2);
            if(obj.value>=suffice){
                $$(".pay").show();
                $$(".pay").find("i").text(discountPrice > remaining ? remaining : discountPrice);
            }else{
                $$(".pay").hide();
            }
        } else {
            obj.value = document.getElementById("hide").value;
        }
    }

在JS代码中引入了mui绑定tap事件在H5移动端来实现