移动端的坑 之 在可编辑的div中实现placeholder

Posted 2020-09-26 Sunnie_C

1.当我们个  div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的

<div contenteditable="true"  placeholder="please write infomation"></div>//没有效果

 

2.可以添加样式来实现

*[contenteditable="true"]:empty:before{
        content:attr(placeholder);
        color: #A9A9A9;
    }

这段代码匹配 属性 contenteditable="true" 的元素类容为empty时添加:before伪元素 

　　attr(placeholder)获取属性placeholder的值赋值给content这样就可以模拟的实现文本框中 placeholder 属性,

 

3.在ipone机中首次显示时是ok的,当你输入内容后再清空发现 并没有显示再显示placeholder的内容，这是因为这个可编辑的块这时不是空，还有换行符，

如果我们有使用jquery，zepto等我们可以拿到这个元素的text();跟这个元素再赋值“”;

如果我们用js,用innerText去获取块元素的值，你会发现不管你值是否为空都是true,就没有办法判断我什么时候是空(只有在ipone中才这样)，

然后我就去看了下jquery中的text()是怎么实现的，它用了一个textContent属性，用这个属性就可以判断到