首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

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

禁用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()的效果。这个问题非常要命,因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。

热点排行