html设置可编辑状态,contenteditable设置元素可编辑(示例代码)

需求背景

实现一个输入框，高度可以随着输入文字的增加而自动增高

有placeholder，输入为空时，显示placeholder

我们知道可以将div的contenteditable设置伪true，将其变为可输入状态。代码如下：

这样就满足了我们的第一个需求——高度自适应。但是在手机上测试会发现第一个问题，iOS上面无法输入。经过查找资料，发现只需要为其添加如下样式即可:

div{

user-select:text;

-webkit-user-select:text;

}

placeholder

通过contenteditable方法实现的输入框无法添加placeholder。

使用css模拟placeHolder

// html

// less

div{

&:empty:before{

content: attr(data-placeholder);

color:#bbb;

}

&:not(:empty){

&:focus:before{

content:none;

}

}

}

但是经过测试在不同手机上面变现不一致，所以放弃了这种方案(猜测可能和:not伪类的兼容有关，还没有做验证)。

使用css+js实现 placeholder

思路：根据输入通过动态添加class，模拟placeHolder的行为。

// html

// 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