用contenteditable做一个类似input框的效果

一、定义和用法

1、所有主流浏览器都支持 contenteditable 属性。
2、contenteditable 属性指定元素内容是否可编辑。
3、可以通过innerText和innerHTML获取对应的文本。

二、写法

1、通过css来控制点击区域的显示和隐藏

div[contenteditable]:empty:not(:focus):before {
  content: attr(placeholder);
  color: #aaa ;
}

2、通过css来显示默认文本

div.aeex_bi_E:empty:before {
    content: attr(placeholder);
    color: #aaa;
    font-size: 14px;
  }

三、效果图

截图