页面编辑

你可以在地址栏输入以下代码, 这样浏览器就变成了编辑器。

1
data:text/html, <html contenteditable>

需求 —— 页面需要一个文本输入框。

该文本输入框默认状态下有默认文本提示信息
文本框输入状态下其高度会随文本内容自动撑开

像这样的需求我们就可以使用

1
<div contentEditable='true'></div>

代替 textarea 标签。
不过 contentEditable=’true’ 是不会有 placeholder 的，那 placeholder 怎么办呢？
一般会使用如下方案，输入内容后改变 class：

1
2
3
4
5
6
7
<div class='haveInput' contentEditable='true' placeholder='请输入'></div>
// css 样式
.haveInput:before {
    content: attr(placeholder);
    display: block;
    color: #333;
}