div仿textarea使中度自适应

By admin in 4858美高梅 on 2019年4月6日

  后天真正有些无语,在百度上找了过多有关textarea和input中度自适应的代码,并且考虑到了要看清textarea的滚动条,从而动态改变它的莫大,直到本人查找了这些让自身目瞪狗呆的格局……

div仿textarea使高度自适应,divtextarea

  明日真正有点无语,在百度上找了诸多有关textarea和input中度自适应的代码,并且想念到了要判断textarea的滚动条,从而动态改变它的莫斯中国科学技术大学学,直到笔者查找了那些让本身目瞪狗呆的情势……

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

观望这句话小编感觉……It’s all

一言以蔽之的介绍一下contenteditable:规定是不是可编制成分的剧情。

属性值:true:表示可编写制定成分;

    false: 表示不可编辑成分;

    classname:继承父成分的contenteditable。

有了那特性情,可编写制定的竹签就不再是input和textarea了,p成分、div成分等等都以足以编写制定的。

接下去大家只需求设置那个div的增幅和纤维中度就能够达成自适应了。当然你要为div加二个border,幸免大家找不到它。

 

那让自己深刻地觉获得了学以致用的显要,以此共勉。

今天真正有点无语,在百度上找了重重有关textarea和input中度自适应的代码,并且思索到了要认清textar…

  前些天真的有些无语,在百度上找了成百上千关于textarea和input中度自适应的代码,并且思索到了要咬定textarea的滚动条,从而动态改变它的惊人,直到自个儿寻找了那个让自家目瞪狗呆的不二等秘书诀……

稍许韦伯或者未有用过contenteditable那性情格,固然想编辑四个DIV里面包车型地铁始末,那性情格是3个12分不错的挑叁拣4

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

 

看到那句话笔者感到……It’s all

看样子那句话作者深感……It’s all

<div contenteditable=”true”>能够编写里面包车型地铁内容</div> 

简易的牵线一下contenteditable:规定是还是不是可编制成分的剧情。

div仿textarea使中度自适应。简简单单的介绍一下contenteditable:规定是不是可编写制定成分的情节。

要是您在BODY里面添加contenteditable=”true”,能够发现该属性是多么的神奇。因而大家得以给HTML标签设置contenteditable=”true”属性则能够对该标签举办编辑。

属性值:true:表示可编写制定成分;

属性值:true:表示可编写制定成分;

 

    false: 表示不可编辑元素;

    false: 表示不可编辑成分;

contenteditable属性包容全体浏览器(IE6从前的本子是或不是同盟未测试)

    classname:继承父成分的contenteditable。

    classname:继承父成分的contenteditable。

在多少时候我们1齐能够用DIV去顶替input或许textarea来达到相同的效劳,例如,在应用ajax的时候,在交付表单时大家可以获得DIV的始末。

有了那么些天性,可编写制定的标签就不再是input和textarea了,p成分、div元素等等都是足以编写制定的。

有了那几个性子,可编写制定的竹签就不再是input和textarea了,p成分、div元素等等都以足以编写制定的。

精心的人会发现,QQ空间中的公布说说的文本框其实正是多个DIV,而非textarea文本框。

接下去大家只供给设置这一个div的增进率和微小中度就能够完毕自适应了。当然你要为div加3个border,防止大家找不到它。

接下去我们只须要安装那几个div的大幅和纤维高度就可见落到实处自适应了。当然你要为div加1个border,幸免大家找不到它。

Div+CSS怎么着模拟textarea文本域中度自适应以完结html伍行业内部的contenteditable属性

 

 

重在通过为标签添加HTML5中的contenteditable属性达到此意义(contenteditable:规定是还是不是允许用户编辑内容),很棒的是,此属性IE也会支撑,所以不要再为包容难题太去纠结了。

那让自家浓厚地感觉到了学以致用的首要性,以此共勉。

那让自身深刻地感觉到了学以致用的重中之重,以此共勉。

代码如下:

  <style type=”text/css”>
  .demoEdit{border:1px solid #dddddd;width:450px;min-
height:20px;_height:20px;outline:0px;padding:贰px;} //
outline:0px;样式消除容器获取关节时,在FF浏览器下容器会呈现虚线框的效果.
  .demoEdit p{margin:0px;padding:0px;}
  </style>
  <div contenteditable=”true” style=”border:1px solid
#dddddd;width:360px;min-height:20px;_height:20px;outline:0px;”></div>
  <div contenteditable=”true” class=”demoEdit”></div>

 

  附:
  在FF浏览器下,容器获取关节时,光标的莫斯中国科学技术大学学会与容器的莫斯中国科学技术大学学学一年级致高还是不出示光标.
此时若为容器暗许加个占位符,比如<br/>或 能够消除这一难点.

当今煜子给大家介绍另一种可编写制定可机关适应高度,但又并非加js代码的好措施。让大家开开眼界,煜子直接动用DIV也足以当文本框用,类似于TextArea文本框,更关键的是DIV的用户体验更健全更帅。  

Html中的content艾德itable属性能够打开有些因素的可编写制定状态。大概你没用过contentEditable属性,甚至从不听新闻说过,contentEditable的效应格外神奇。能够让div或任何网页,以及span等等因素设置为可写.大家最常用的输入文本内容正是input与textarea
使用content艾德itable属性后,能够在div,table,p,span,body,等等很多因素中输入内容.尤其是content艾德itable已在html伍标准中获取实惠的援救。大家来见证一下呢。

安装content艾德itable=”true”属性后,是还是不是1对壹的神奇。哈哈… 
  
DEMO页面: 

笔者们来个特效吧,通过开启div成分编辑,是或不是能插入图片,那是要求动用js了。

 代码如下:

<script>
function img(){
var location一 = prompt(“请输入图片的地点:”,”http://”);
if(location1){
selImg(location1);
}
}
function selImg(s){
if(!s){return false;}
var h=s.substr(s.lastIndexOf(“.”)+1,3);
if(h==”gif”||h==”jpg” || h==”GIF” || h==”JPG”){
Edit=document.getElementById(“idEdit”)
Edit.innerHTML+='<img src=’+s+’>’
4858美高梅,}
else{
}
}
</script>
<div NAME=EditCtrl id=idEdit contentEditable=true
style=”width:100%;height:200px;border:1px solid #666666″>
<b>Yuzi.me</b></div>
<input type=”button” name=”Submit” value=”插入图片”
onclick=”img()”> 

 

妙哉,假使想选用更加多效益,须要协调写js代码了。望各位攻城(功臣)们发挥最佳,盼分享!

原稿地址:http://www.jb51.net/web/175373.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有