需求背景
- 实现一个输入框,高度可以随着输入文字的增加而自动增高
- 有placeholder,输入为空时,显示placeholder
我们知道可以将div的contenteditable设置伪true,将其变为可输入状态。代码如下:
<div contenteditable="true"></div>
这样就满足了我们的第一个需求——高度自适应。但是在手机上测试会发现第一个问题,iOS上面无法输入。经过查找资料,发现只需要为其添加如下样式即可:
div{
user-select:text;
-webkit-user-select:text;
}
placeholder
通过contenteditable方法实现的输入框无法添加placeholder。
使用css模拟placeHolder
// html
<div contenteditable="true" data-placeholder="请输入手机号码"></div>
// less
div{
&:empty:before{
content: attr(data-placeholder);
color:#bbb;
}
&:not(:empty){
&:focus:before{
content:none;
}
}
}
但是经过测试在不同手机上面变现不一致,所以放弃了这种方案(猜测可能和:not伪类的兼容有关,还没有做验证)。
使用css+js实现 placeholder
思路:根据输入通过动态添加class,模拟placeHolder的行为。
// html
<div class="input-item empty" contenteditable="true" data-placeholder="请输入手机号码"></div>
// less
.input-item{
user-select:text;
-webkit-user-select:text;
&.empty:before{
content: attr(data-placeholder);
color:#bbb;
position: absolute;
}
}
// js
$(‘.input-item‘).on(‘keyup‘,function(){
$(this).removeClass(‘empty‘)
if($(this).text() == ""){
$(this).addClass(‘empty‘)
}
})
到此,我们已经实现了第二个需求——可以设置placeholder
时间: 2024-10-29 16:35:27