内容可编辑contenteditable

前言

最近遇到一个问题：文本域的高度随输入内容的多少自适应，就像是这样的：

刚刚拿到这个问题，就想到用textarea来搞定，尝试了一下，虽然也搞定了，但总感觉有点麻烦。仔细思考一番，想到貌似h5有个contenteditable全局属性也可以实现文本编辑，遂尝试搞起。

contenteditable是什么？

MDN上是这样描述的：

The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

contenteditable可以让作用于一个元素，那么浏览器可以让该元素变成可编辑的。
也就是说给一个元素添加该属性，那么该元素就变成了可编辑的元素，就如同textarea等输入元素。

该属性支持的值有哪些？

MDN有说：

The attribute must take one of the following values:
true or the empty string, which indicates that the element must be editable;
false, which indicates that the element must not be editable.
If this attribute is not set, its default value is inherited from its parent element.

也就是true ｜ false ｜空字符串(”)
可以设置为true，或则false，活着空字符串。如果没有设置该属性的值，那么从父元素继承。
使用如下

<div id="ce" class="test" contenteditable="true"></div>

如果contenteditable赋值为空字符串或者只写了该属性而没有赋值，那么也会被认为是true，也就是说依然可以实现元素可编辑。就像是这样的：

<div id="ce" class="test" contenteditable=""></div>

// 虽然文档上说这种写法是不允许的，但是这种写法其实也可以让元素   // 变成可编辑的
<div id="ce" class="test" contenteditable></div>

使用中遇到的坑

先上图：

现象就是当输入足够多多文本时，高度确实是随着文本的增多高度增加了，但是减少文本时，高度却不减少了。

上代码
css code：

.test{
                display: -webkit-box;
                outline: none;
                margin: 50px 0;
            }
            .test .left{
                width: 15%;
            }
            .test .right{
                border: 1px solid #ddd;
                width: 85%;
            }

html code

<div id="ce" class="test">
            <div class="left">地址：</div>
            <div class="right" contenteditable="true"></div>
        </div>

问题就在于：设置了display: -webkit-box，使用伸缩盒子布局的时候，会出现这种问题。
//：那么究其本质原因是什么呢？本小白目前也不清楚。。。

解决办法：可以使用浮动布局

 <div style="display: block;" class="clearfix">
                <div class="fl">地址</div>
            <div id="textarea" style="width: 85%; outline: none;" class="fr placeholder" contenteditable="true"></div>
        </div>

那么问题基本都解决了，但是还有一个小问题：那就是使用textarea可以使用placeholder占位符，但使用contenteditable就没法使用placeholder属性了。怎么破？
我们可以css和js来模拟占位符：
比如
css code

#textarea.placeholder:after{
    content: '除省市区县的详细地址';
    color: #c6c6c6;
}

js code

document.getElementById('textarea').oninput = function(){
        if(this.innerHTML.length != 0) {
            this.classList.remove('placeholder');
        } else{
            this.classList.add('placeholder');
        }
    }

这样一捣鼓，就实现了前言中的效果。。。

使用js 来操作contenteditable

前面说到的是在一个元素上设置contenteditable=”true”来使元素可编辑，那么通过js怎么来实现呢？
看文档：

element . contentEditable [ = value ]
Returns “true”, “false”, or “inherit”, based on the state of the contenteditable attribute.
Can be set, to change that state.
Throws a SyntaxError exception if the new value isn’t one of those strings.

var divEdit = document.getElementById('ce');
        divEdit.contentEditable = 'true';

通过js来操作，需要注意的有几点：

1. contentEditable使用驼峰写法，和全局属性都是小些字符要区别开来。
2. 在全局属性中，可以设置空字符串来达到可编辑的效果。但通过js就不能赋值为空字符串了，否则达不到可编辑的效果。

3. 通过js赋值，只能是true，false；否则抛出SyntaxError exception。

   isContentEditable属性

element.isContentEditable

通过isContentEditable来判断某个元素是否可编辑。
如果该元素可编辑，返回true；否则，false。

如果想了解contenteditable跟多内容，可以：
狠狠点击这里