注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

jiwenxu的博客

CODE

 
 
 

日志

 
 

contentEditable与designMode  

2009-07-30 15:46:07|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

将BODY的contentEditable属性设为true,最为简捷的方式

激活编辑器     
   
激活编辑器的方法有两种。第一种方法是将整个文档设置为设计模式。第二种方法可以在浏览模式中使用,来使各个元素可在运行时编辑。如果想让整个文档可在浏览时进行编辑,则可以在文档正文上设置   contentEditable   属性。  
   
将文档设置为设计模式    
   
要将整个文档设置为设计模式,可以对文档对象本身设置   designMode   属性。当文档处于设计模式时,将不运行脚本。这样,似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意,但这样做没有作用。当用户打开它后,它将保持在设计模式状态。当他们下次单击此按钮时,它将被选定而不是被单击,他们再次单击它,将能够编辑它的值。这就是为什么如果要使用设计模式最好对框架或   IFrame   中的文档设置   designMode   属性的原因。下例展示如何为   IFrame   中的文档打开设计模式:  
   
<script   for="btnDesign"   event="onclick">  
      targetDoc   =   document.frames(0).document;  
      if   (targetDoc.designMode   ==   "On")  
          targetDoc.designMode   =   "Off";  
      else  
          targetDoc.designMode   =   "On";  
</script>  
<button   id=btnDesign>DesignMode</button>  
<iframe   src="blank.htm"   style="border:   black   thin;   width:100%;   height:200px"></iframe>    
   
designMode   属性的值始终以首字母大写格式存储,即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode   属性的默认值是“Inherit”。  
   
在浏览模式中使元素可以编辑(或在设计模式中不可编辑)    
   
在   Internet   Explorer   5.5   中,可以针对每个元素激活编辑器,而同时,文档本身处于浏览模式中。只要将   contentEditable   属性设置为   True,就能使元素在浏览时可被编辑。下例展示如何说明性地设置该属性,并创建行为类似文本框的跨距:  
   
<span   contentEditable=true   style="width:150;   border:lightgrey   3px   inset"></span>  
   
要使元素在全部脚本过程中可被编辑是非常容易实现的。下面的范例显示如何在脚本中对   ID   为“foo”的元素设置   contentEditable   属性:  
   
foo.contentEditable=True;  
   
要防止元素在设计模式中处于可编辑状态,可以将   contentEditable   属性设置为   False。但这将使元素具有布局,这样,当它在设计模式中时,用户将能够对它进行控制选定、拖动、调整大小等:  
   
foo.contentEditable=False;  
   
contentEditable   元素的继承和嵌套    
   
contentEditable   属性是被继承的,所以,如果您说明元素具有   contentEditable   属性,则默认情况下它的所有子元素都将是可编辑的。(contentEditable   属性的默认值是“Inherit”。  
   
通过将其   contentEditable   属性设置为   False,可以使   contentEditable   元素的后代成为不可编辑的,但这样之后,请记住设置元素的   contentEditable   属性将导致元素具有自己的布局。无论元素的   contentEditable   属性被设置为   True   或   False,都要发生这样的情况。还要记住,当有布局的元素处在可编辑的容器中时,一旦用户单击它的内部,它将被控制选定。当它被控制选定时,将显示抓取手柄,并且用户可以拖动该元素或调整其大小。这并不表示不应当在可编辑的元素内嵌套不可编辑的元素,只不过要加以注意罢了。  
   
判断元素是否是可编辑的    
   
要判断元素是否是可编辑的,只检查   contentEditable   属性的值是不够的。元素可能根本没有   contentEditable   属性,但仍然可能已经从它的某个祖先那里继承了内容可编辑性。或者,它可能是默认时可编辑的元素,如文本框。或者,包含它的文档可能处于设计模式中。确定元素是否可编辑的唯一完全可靠的方法是检查   isContentEditable   属性。isContentEditable   属性综合了所有这些因素。该属性是只读的,其结果为布尔值。下例展示如何判断   ID   为“foo”的元素是否可以被编辑:  
   
result=foo.isContentEditable; 

  评论这张
 
阅读(1312)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018