div仿真模拟textarea文字域完成高宽比自融入实际效

日期:2021-01-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

1、有关textarea文字域和高宽比自融入

textarea标识为表模块素,1般用在多写作字的键入。在web运用上普遍的是评价键入框,新浪微博信息内容键入框等。比如企鹅新浪微博的键入框:

做为多写作本域作用来说,textarea考虑了大家绝大多数的要求。但是,textarea有1个不够便是不可以像一般div标识1样高宽比能够追随內容自融入。textarea一直很自信地炫耀它的翻转条,高宽比固执己见地屹立不倒。因此,有时,以便提升互动体验想让文字域高宽比自融入的情况下,就会遇到不便。其实不是不可以完成,比如Google的Buzz的键入框便是高宽比自融入里边的內容的,以下截图:

不说远的,我本人网站的发问与沟通交流网页页面中的回应键入框(需登陆):

当键入1些文本后,文字域的高宽比全自动随內容是多少撑高了:

但是,这些文字域的高宽比自融入全是根据JavaScript脚本制作完成的。拿我本人站点上的高宽比自融入文字框来讲,要克隆1个掩藏的textarea,根据即时的文本取值,检验是不是造成翻转条来明确显示信息文字域的高宽比是不是动态性提升。针对JavaScript不熟习的人来说,这类方式的完成比想方法跟校花约会还不便。

但是,具体上,假如你规定并不是很高,是个十分简单,且老少咸宜的完成方式的。这类方式便是应用一般的div标识仿真模拟textarea文字域,另外又运用了div标识的高宽比自融入性。因而,textarea文字域的高宽比自融入实际效果便可以轻轻松松完成。

2、div仿真模拟textarea文字域及高宽比自融入

我以前汉语翻译过1篇文章内容,名为“你务必了解的28个HTML5特点、小技巧和技术性”,在其中在“6、內容可编写”一部分详细介绍了1个标识特性,为contenteditable,顾名思意,便是容许客户编写元素內容包括的随意文字,包含子元素。

运用了此特性后,一般的div标识也会像文字域1样能够得到聚焦点,另外有1个光标在那里闪啊闪,闪啊闪,你越看她她越闪。web QQ 2.0 的闲聊会话框的键入框便是运用了此特性。

//zxx:企鹅的圣诞主题页面很nice,视觉效果实际效果很赞,下雪的实际效果也很有爱,连cup也为之奔流。

应用很简易,1个一般的block元素上加个contenteditable="true"就ok了,以下:

<div contenteditable="true"></div> 

true外面的引号乃至去掉都没事儿。

contenteditable特性虽是HTML5里边的內容,可是IE好像老早就适用此标识特性了。因此,适配性层面還是无需太担忧的。

ok,最不便的仿真模拟textarea的可编写实际效果早已处理了,如今要想应用div完成高宽比自融入那就好像给小编草草松松土1样非常容易的。应用min-height特性基础上就1步到位了,考虑到到IE6访问器对min/max大家族嗤之以鼻,融合其內部元素外溢会撑开父标识高宽的特点,IE6访问器立即定高便可以了。因而,假定大家要完成默认设置200像素高宽比,高宽比可随內容自融入的实际效果,立即下面两个款式便可以了:

{ min-height: 200px; _height: 200px; }

因而,把说到如今的內容融合1起,便可以应用div仿真模拟textarea文字域轻轻松松完成高宽比自融入了。

以下检测编码——
CSS编码:

.test_box {    width: 400px;    min-height: 120px;    max-height: 300px;    _height: 120px;    margin-left: auto;    margin-right: auto;    padding: 3px;    outline: 0;    border: 1px solid #a0b3d6;    font-size: 12px;    word-wrap: break-word;    overflow-x: hidden;    overflow-y: auto;    _overflow-y: visible;}

HTML编码:

<div class="test_box" contenteditable="true"><br /></div> 

結果以下图(所有截自IE6访问器):

随后重新浪blog主页随意找篇文章内容,拷点文本拷贝进去,結果以下图:

能够看到可编写标识高宽比自带撑开了。彻底的CSS,沒有杂碎的js编码。大家设定能够设置1个最大高宽比(max-height),让其超过的情况下出現翻转条,正以下面demo网页页面所做的1样。

您能够狠狠地址击这里:div仿真模拟textarea以完成高宽比自融入demo

但是,事儿其实不会这般1帆风顺,也有很多留意事项值得1提。

3、1些留意与表明

1、 当代访问器如Firefox在可编写方式下的div获得聚焦点的情况下会有虚框,而具体上textarea是沒有虚框显示信息的,此迹象会曝露出div是个冒牌货,因此,必须加上下面的款式:

outline:0;

2、 Firefox访问器下可编写方式的div假如內部元素是空空的,那末其在获得聚焦点是情况下,光标不能见或是与外界div齐高,这也是会曝露出自身是textarea冒牌货的,因此,默认设置状况下,大家能够在此div中提升1个孤独的<br />换行标识。可是,IE8下,假如有个默认设置的br标识,光标部位将会会在第2行闪来闪去,因此,IE8下可编写div里边默认设置是不可以有br标识的,这个嘛,您自身想方法清掉吧。

3、 IE访问器下(IE6~8),键入文本回车的情况下,div內部是会全自动造成p标识包括每行元素的,而别的访问器貌似是造成br标识(这里并未所有检测,如有禁止,欢迎纠正)。因为默认设置的p标识是有1em尺寸的左右margin值的,以便实际效果统1,大家能够设定诸以下面的款式消除p标识的margin值:

.test_box p{ margin: 0; }

4、可编写方式的div键入的內容都会是很纯正的HTML编码,假如做为內容递交的话必须开展HTML标识符过虑。也有,假如您是从别的网页页面上复制1段內容过来,随后粘贴到可编写方式下的div中,会连HTML也详细的拷贝过来的(不一样于textarea),因此,这里也是有必要开展HTML标识符过虑(比如web QQ)。

5、 IE6访问器不适用max-height特性,因此,只用CSS是没法完成超出1定高宽比出現翻转条的实际效果,必须js相互配合完成。

6、 可编写方式的div标识与textarea1样,是适用focus, blur恶性事件的。当然也适用focus伪类,demo网页页面中Firefox等当代访问器获得聚焦点时的外发光便是应用的:focus。

4、圣诞前夜之结语

明日安全夜,企业的老外销售市场负责人raph早已回家了过年去了,这几日是不容易过来了。像圣诞节这类具备喜庆气场的生活,更是低头写编码的吉日,由于较为非常容易受刺激性。麻麻,没有谓啦,闷骚超级,大不上何时去百合网,新世纪佳缘甚么的转悠转悠。

啊,就这些,谢谢您的阅读文章。如果文章内容有描述禁止确的地区欢迎纠正。