应用HTML5中的contentEditable来将多写作本全自动增高

日期:2020-12-11 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

contentEditable是由微软开发设计、被别的访问器反编译程序并投入运用的1个全局性特性。该特性的关键作用是容许客户编写元素中的內容,因此该元素务必是能够得到电脑鼠标聚焦点的元素,并且在点一下电脑鼠标后要向客户出示1个插进标记,提醒客户该元素中的內容容许编写。contentEditable特性是1个布尔运算值特性,能够被特定为true或false。

除此以外,该特性也有个掩藏的inherit(承继)情况,特性为true时,元素被特定为容许编写;特性为false时,元素被特定为不容许编写;未特定true或false时,则由inherit情况来决策,假如元素的父元素是可编写的,则该元素便是可编写的。

此外,除contentEditable特性外,元素还具备1个isContentEditable特性,当元素可编写时,该特性为true;当元素不能编写时,该特性为false。
下面得出了1个应用contentEditable特性的示例,当目录元素被再加contentEditable特性后,该元素就变为可编写的了,读者可自主在访问器中对该示例开展实验。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>    
  2. <head>    
  3. <meta charset="UTF⑻">    
  4. <title>conentEditalbe特性示例</title>    
  5. </head>    
  6. <h2>可编写目录</h2>    
  7. <ul contentEditable="true">    
  8. <li>目录元素1</li>    
  9. <li>目录元素2</li>    
  10. <li>目录元素3</li>    
  11. </ul>   

这段编码运作后的結果如图:

写作本全自动增高

谈到多写作本框,大伙儿马上就会想起应用textarea,应用textarea着实便捷,但便是有1点不大好,不可以全自动增高,只能特定相应的列和行的篇幅或立即css给高宽。

全自动增高在一些情况下還是必须的,例如相近发新浪微博的键入框,它便是1个典型,必须这样的要求:文字框有个默认设置高宽比,键入文本超过这个高宽比后会全自动增高,还要有1个最高的程度,超出这个程度之后就会出現竖直翻转条。

假如应用textarea来进行这个要求,还必须相互配合js来监视文字高宽比的转变来动态性更改文字框的高宽比,这样就很不便捷了,特别是在挪动端情况下就不科学研究了,这个情况下便可以用上特性contenteditable了。

如:

XML/HTML Code拷贝內容到剪贴板
  1. <div contenteditable="true" class="box" id="box" >  
  2.                
  3. </div>  
  4. <style>  
  5. .box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}   
  6. </style>  

要是特定contenteditable特性值为true,div就变为能够编写的了,而且会伴随着內容提升全自动增高,随后大家给div1个最大高宽比,便可以完成上面所说的要求。