h5居中loading_h5中实现input的placeholder垂直居中显示

设计师在设计input的时候，往往会设计input里面有值和没有值时的字体不一样，比如下图

input

上图文字大小为72px，下图文字大小为48px，如果仅仅使用input的属性来设置css属性，无法达到设计效果，会出现placeholder文字偏下的问题，如下图：

fact

为了实现placeholder文字居中又不影响input输入文字的UI效果，于是，我给input的placeholder设置为空字符串，重新定义了一个div控件，这个div控件里面的内容填上所需要的placeholder的文字，通过监听input里面文字是否为空来隐藏和显示div里的文字内容，代码如下

请输入转入金额

.placeholder{

position:absolute;

font-size:48px;

font-family:PingFangSC-Semibold;

color:rgba(204,204,204,1);

height:66px;

line-height:66px;

padding-top:47px;

padding-left:62px;

}

修改之后的显示效果如下：

success