大佬们,最近遇到一个坑,input, testarea,这俩输入框,placeholde设置颜色和字号可以,但是设置行高有时候不生效。 (解决方案直接看方案二)
当输入框的字号为80px,placeholder的字号为30px时,placeholder的位置太靠下了,这个就很丑了。
input::-webkit-input-placeholder {
color: red;
font-size: 22px;
line-height: 96px;
}
当时想了两个方案
1我们这里使用vant的数字键盘,可以不用input,也能实现输入功能,直接写四个div,用定位的方式实现input,实现光标,实现placeholder,
这个方案有个问题,需要自己计算光标的位置,这个自己算的不太准,出现了下面这种情况,数字1的宽度和234567890的不一样,输入的1多了光标离的就会很远。还有不能随便移动光标的位置。
所以方案1上线了一个月就扑街了。
下面方案二,自己写一个placeholder,定位到input框的正上方。监听用户输入了没有,如果输入了,就隐藏placehoder,还用input自己的光标。
方案二效果图,个人觉得还行