移动端的坑之在可编辑的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盒。保健品类请选择食品。")
              }

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

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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