contentEditable

   今天用了下contentEditable属性,感觉不错。在有contentEditable这个属性以前,一般做这个效果时,就会需要两个元素了,一个是待编辑的元素,另一个是一个type="text"类型的input,当需要进行编辑时,将第一个元素隐藏起来,将input显示出来,造成一种可编辑的假象。有了contentEditable,就只需要一个元素了,需要编辑时,将其contentEditable属性设为true即可。但有几点需要注意:

1)设contentEditable为true之后,元素虽然可编辑,但不像input那样有边框可以很方便地看出其范围,需要我们自己设置样式,比如加个边框,加个背景色什么的;

2)设contentEditable为true的元素,有focus事件,但没有select事件,所以没办法自动“全选”;

3)不像input那样有maxlength可以直接调用,控制编辑的长度就要靠我们自己了;

4)编辑后的文本,如果带有<>,会自动进行转义,比用input安全,当然,如果用input我们可以自己手动去转一下。

posted on 2011-06-01 18:20  真阿当  阅读(278)  评论(0编辑  收藏  举报