div仿textarea使中度自适应

  后天的确有个别无语,在百度上找了不可计数有关textarea和input高度自适应的代码,并且思考到了要一口咬住不放textarea的滚动条,从而动态改变它的高度,直到自身寻找了那个让本身目瞪狗呆的主意……

div仿textarea使中度自适应,divtextarea

  今日确实有点无语,在百度上找了重重有关textarea和input中度自适应的代码,并且考虑到了要咬定textarea的滚动条,从而动态改变它的万丈,直到作者寻找了那一个让本身目瞪狗呆的主意……

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

看到那句话小编倍感……It’s all

差不离的介绍一下contenteditable:规定是还是不是可编写制定元素的剧情。

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

div仿textarea使中度自适应。    false: 表示不可编辑成分;

    classname:继承父元素的contenteditable。

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

接下去我们只供给安装那个div的幅度和微小中度就可见落到实处自适应了。当然你要为div加多个border,幸免大家找不到它。

 

那让笔者深刻地感觉到到了学以致用的机要,以此共勉。

前天着实有些无语,在百度上找了广大关于textarea和input中度自适应的代码,并且思量到了要咬定textar…

  前天着实某些无语,在百度上找了很多关于textarea和input中度自适应的代码,并且思考到了要看清textarea的滚动条,从而动态改变它的冲天,直到自身搜寻了那么些让自家目瞪狗呆的法子……

有点Weber只怕未有用过contenteditable那么些个性,假使想编辑二个DIV里面包车型地铁剧情,那特性格是3个万分科学的选料

<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:规定是还是不是可编写制定成分的始末。

简短的牵线一下contenteditable:规定是不是可编写制定成分的始末。

借使您在BODY里面添加contenteditable=”true”,能够发现该属性是何等的神奇。因而大家得以给HTML标签设置contenteditable=”true”属性则能够对该标签实行编制。

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

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

 

    false: 表示不可编辑成分;

    false: 表示不可编辑元素;

contenteditable属性包容全数浏览器(IE6在此以前的本子是或不是合营未测试)

    classname:继承父成分的contenteditable。

    classname:继承父成分的contenteditable。

在稍微时候大家壹齐能够用DIV去顶替input或许textarea来达到相同的功用,例如,在利用ajax的时候,在付给表单时大家得以赢得DIV的始末。

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

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

密切的人会意识,QQ空间中的公布说说的文本框其实便是二个DIV,而非textarea文本框。

接下去我们只须求安装那个div的宽度和微小中度就可见落到实处自适应了。当然你要为div加一个border,防止我们找不到它。

接下去大家只要求安装那一个div的升幅和纤维高度就可见落实自适应了。当然你要为div加四个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属性能够打开某个因素的可编写制定状态。或者你没用过content艾德itable属性,甚至从不传说过,content艾德itable的效果相当神奇。能够让div或任何网页,以及span等等因素设置为可写.大家最常用的输入文本内容正是input与textarea
使用content艾德itable属性后,能够在div,table,p,span,body,等等很多成分中输入内容.越发是content艾德itable已在html五号正楷字式中获得管用的帮衬。大家来见证一下啊。

设置content艾德itable=”true”属性后,是或不是格外的神奇。哈哈… 
  
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+’>’
}
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

相关文章

发表评论

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

*
*
Website