zhengrenzhe's blog   About

contenteditable属性总结

在html元素中,有一个contenteditable属性,表示这个元素是不是可编辑的。在html中,任何元素都是可编辑的,可编辑的意思就是这个元素可以表现的像textarea一样可以输入文字,幸运的是,这是个很早就被提出的属性,就连IE6都可以使用,所以兼容性不是问题,contenteditable属性最常被应用在富文本编辑器上。

应用了contenteditable属性的元素与textarea相比,虽然都能作为文字输入元素,但还是有些不同,主要差别体现在元素对输入内容的自动处理以及普通元素与input类元素的差别,下面是我总记得一些内容。

1.应用了contenteditable属性的元素与textarea都能正常的输入文字,获取输入内容时,textarea使用value获取,应用了contenteditable属性的元素使用innerHTML获取。

2.这也是重点之一:textarea不会对输入内容做任何处理,他会忠实记录用户输入,下面的图是输入内容与console.log输入值出的内容:

textarea

textarea

可以看到,textarea是不会对输入做任何处理的,所以不做转义的话可能会被XSS,不过这有一点好处就是可以忠实记录用户记录,只需要对特殊字符进行转义即可。

而应用了contenteditable属性的元素则会根据用户的输入对数据进行处理,比如你按了return/enter再输入,这样新输入的内容就会被一对<div></div>包裹,如果你按shift + return/enter在输入,这时就会出现一个<br/>,如果有可能引起XSS的字符,浏览器会自动将它转义,避免XSS。就像下面这样:

contenteditable

contenteditable

可以看到,return后出现了divshift + return后出现了br,而script中的<>被转义了。

3.虽然应用了contenteditable属性的元素可以当作输入元素,但它并没有像input类元素那样的特性,比如没有placeholder属性,所以你得自己模拟,但相比textarea也有个优点就是它可以自动根据内容改变自身大小。

textarea和contenteditable都能被用于接收大量文本输入,使用textarea你可以轻松的用input元素的常见属性,但用contenteditable你就得模拟;使用contenteditable你可以轻松处理XSS问题,用它做富文本编辑器也比textarea有优势,具体选择哪个还是要看项目需要了。

← JS正则表达式中全局标志g对匹配的影响  纯CSS实现tab切换之一 →