contenteditable 与 textarea 的那点事

  1. 1. contenteditable的使用
  2. 2. 输入框高度自适应
  3. 3. 拓展

contenteditable html中的一个属性。设置html的contenteditable=‘true’时,即可开启该元素的编辑模式。
Html中的contentEditable的属性可以打开某些元素的可编辑状态;也许你没用过contentEditable属性,甚至从未听说过;contentEditable的作用相当神奇,可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea,使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容。

contenteditable的使用

1.1、功能说明

(1)功能:指定元素内容是否可编辑

(2)说明:是一个布尔值。false是不能编辑,true为可编辑

1.2、实例分析

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>contenteditable</title>
</head>
<body>
<div class="content">
<div contenteditable="true" id="ddd"></div>
</div>
</body>
</html>

1.3、文本值

既然模拟textarea文本域,当然支持focus, blur事件的,自然也支持focus伪类;外表是伪装的很好了,但还是无法阻止contenteditable内心的躁动啊!
看看手打的内容和复制粘贴的内容有什么区别:

1111

可以明显的看出,内容并不是纯文本,而是富文本格式的。那该如何获取输入框里面的纯文本呢?
以上面的例子为准,既然是div那么肯定能获取里面的文本,用innerText就足够了。

1
document.getElementById("ddd").innerText;

这样就可以获取到里面的纯文本了,看图说话:

1111

由于 contenteditable 自带富文本功能,很适合展示图片。目前UEditor的输入框和qq空间发布说说输入框就是用了 contenteditable 这个属性。

其实也可以在输入的时候做过滤,保证输入的是纯文本,contenteditable 就有这个 plaintext-only 属性值,contenteditable=”plaintext-only” 目前只支持webkit内核的浏览器,所以不是很理想。

输入框高度自适应

2.1、contenteditable 编辑框高度

只要指定contenteditable属性值为true,div就变成可以编辑的了,并且会随着内容增加自动增高,然后我们给div一个最大高度,就可以实现想要的功能了。

2.2、textarea 文本域高度

谈到多行文本框,大家立刻就会想到使用textarea,使用textarea着实方便,但就是有一点不太好,不能自动增高,只能指定相应的列和行的字数或者直接css给高宽。如果使用textarea来实现输入框自适应高度,还需要配合js来监听文本高度的变化来动态改变文本框的高度,这样就很不方便了。

js监听文本域高度代码:

1
2
3
4
5
6
7
8
9
10
function changeTextareaHeight(){
$('body').find('textarea').bind('input propertychange', function() {
textareaHeight(this,240)
})
}
// 此方法可以直接绑定到标签上,利用onkeydown,onchange就可以监听了
function textareaHeight(self,h){
self.style.height = 'auto'; // 高度自动收缩
self.style.height = self.scrollHeight <= h ? h + 'px' : self.scrollHeight + 'px';
}

这样看起来的确比contenteditable麻烦多了,如果是多个textarea文本域,还要遍历一下才能获取到当前所在文本域的高度。

拓展

一个div元素,要让其可编辑,也就是可读写,contenteditable属性是最常用方法,做前端的基本上都知道。但是,知道CSS中有属性可以让普通元素可读写的就没多少个了。
主角亮相:user-modify

支持属性值如下:

1
2
3
4
user-modify: read-only; // 只读
user-modify: read-write; // 可读写,支持富文本
user-modify: write-only; // 只写,基本没有浏览器支持
user-modify: read-write-plaintext-only; // 可读写,纯文本,目前只有webkit内核浏览器支持

经测试,只有webkit内核的浏览器支持比较好,其余内核浏览器基本不支持,看图:

1111

从对比下来的结果看,contenteditable 和 textarea 各有各的优势。在兼容性上,原生的textarea当然比较有优势;在高度自适应上,contenteditable就比较有优势了。但是textarea也可以解决自适应高度问题,关键看你怎么用,在什么场景下用了。

本文地址:http://www.myboolke.com/2017/07/16/textarea/
如有错误或遗漏,欢迎各码友留言。。。