input 和 textarea 的 placeholder 获取焦点后隐藏:
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder
{
text-indent: -999em;
z-index: -20;
}
对于多行输入的文本,textarea 不好做到弹性动态随内容变高,
我们可以将一个div作为文本输入域接收用户输入的信息:
<div contenteditable="true">
...
</div>
为这类输入框 div 添加 placeholder,
直接在标签内设置 placeholder 是不行的,
需要如下操作:
[contenteditable]:empty:before{
content:attr(placeholder);
}
它的placeholder 获取焦点后隐藏的方法如下:
[contenteditable]:empty:focus:before{
content:none;
}
在苹果手机上,此类div在用户点击后不能正确获取焦点,弹出软键盘的解决方法:
[contenteditable]{
-webkit-user-select:text;
user-select: text;
}
此外,苹果手机上尽量不要直接给input设置border-bottom,
因为实际项目中给我发现会出现去除不掉的圆角,还请高人指点。
以上。