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

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属性，用这个属性就可以判断到

 

4.textarea中用 placeholder 属性写入过多文字有2行（可输入药品名称、数量、单位，例：红螺霉素，2盒。保健品类请选择食品。） ，当输入文字然后清空发现只显示一行文字，晕

然后我用jq在输入框input事件时用 element.attr("placeholder","123可输入药品名称、数量、单位，例：阿莫西林颗粒，2盒。保健品类请选择食品。 ") 我去发现出现了

然后又用element.attr("placeholder","可输入药品名称、数量、单位，例：红螺霉素，2盒。保健品类请选择食品。 ") 又有问题了  我就觉得是因为是内容一样的问题，然后果真是

 

if(placeholder == "可输入药品名称、数量、单位，例：红螺霉素，2盒。保健品类请选择食品。"){
_this.attr("placeholder","可输入药品名称、数量、单位，例：红螺霉素，2盒。保健品类请选择食品。 ")//后面多加了个空格
              }else {
_this.attr("placeholder","可输入药品名称、数量、单位，例：红螺霉素，2盒。保健品类请选择食品。")
              }

用这种丑陋的方法解决了，以后有好的在共享出来

转载于:https://www.cnblogs.com/sunnie-cc/p/7121828.html