禁用webkit textarea可调整大小和文本框焦点时边框 , contenteditable 和designMode

禁用webkit textarea可调整大小和文本框焦点时边框 , contenteditable 和designMode
2010年06月20日
　　标明原创的文章转载请注明出处，谢谢! 人个网站：http://www.uedsky.com 更多文章：http://www.cnblogs.com/sohighthesky/
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　大家都知道，Webkit系列浏览器（Safari、Chrome）的textarea的默认效果和其它浏览器不一样，比如，textarea可拖动调整大小，聚焦（onfocus）时边框变成黄色。这些效果的确很酷，但我们有时候不需要这些效果，那怎么办呢？其实用CSS轻松取消这些效果。
　　1. 取消拖动调整大小 textarea { resize: none; } 2. 聚焦时边框颜色不变 textarea:focus { outline: none; } 3. contentEditable和designMode的区别
　　实现可视化编辑，可以使用contentEditable和designMode两种方法。contentEditable刚开始在IE上实现，后来各大浏览器陆续支持contentEditable，HTML5标准也包含contentEditable。designMode只能把document整体改成可编辑状态，但contentEditable可以把任何HTML元素改成可编辑状态，应用范围比designMode广，用contentEditable是将来的趋势。
　　但在IE上designMode和contentEditable不完全一样，有不少细微的差距，我们开发可视化编辑器时需要格外注意。
　　1. 在IE上使用designMode，调用document.domain将报没有权限的错误，用contentEditable没有此问题。
　　2. 在IE上使用designMode，右键菜单没有复制、粘贴功能，出来的是普通网页的右键菜单。
　　3. 在IE6和IE7上使用contentEditable，在某些情况下焦点自动移动到编辑区域，类似focus()的效果。这个问题非常要命，因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。