巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

设置contenteditable属性可编辑HTML标签的内容(可取代textarea)

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-20 08:53:05 阅读数: 190


复制代码代码以下:
<div contenteditable="true">能够编辑外面的内容</div>

若是你在BODY外面加上contenteditable="true",能够发明该属性是何等的奇异。是以咱们能够给HTML标签设置contenteditable="true"属性则能够对该标签遏制编辑。

contenteditable属性兼容一切阅读器(IE6之前的版本是不是是兼容未测试)

在有些时辰咱们完整能够用DIV去替换input或textarea来到达一样的结果,比方,在利用ajax的时辰,在提交表单时咱们能够获得DIV的内容。

仔细的人会发明,QQ空间中的颁发说说的文本框实在便是一个DIV,而非textarea文本框。

Div+CSS若何摹拟textarea文本域高度自顺应以到达html5规范的contenteditable属性

首要经由过程为标签增加HTML5中的contenteditable属性到达此结果(contenteditable:划定是不是是许可用户编辑内容),很棒的是,此属性IE也会撑持,以是不必再为兼容题目太去纠结了。
  DEMO:


复制代码代码以下:
  <style type="text/css">
  .demoEdit{border:1px solid #dddddd;width:450px;min- height:20px;_height:20px;outline:0px;padding:2px;} // 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/>或&nbsp;能够处置这一题目.

此刻煜子给大师先容另外一种可编辑可主动顺应高度,但又不必加js代码的好体例。让大师开开眼界,煜子间接利用DIV也能够当文本框用,近似于TextArea文本框,更主要的是DIV的用户休会更完善更帅。  

Html中的contentEditable属机能够翻开某些元素的可编辑状况。或许你没用过contentEditable属性,乃至从未传闻过,contentEditable的感化相称奇异。能够让div或全部网页,和span等等元素设置为可写.咱们最经常利用的输出文本内容便是input与textarea 利用contentEditable属性后,能够在div,table,p,span,body,等等良多元素中输出内容.出格是contentEditable已在html5规范中获得有用的撑持。大师来见证一下吧。

设置contentEditable=”true”属性后,是不是是相称的奇异。哈哈…
 
DEMO页面: http://demo.jb51.net/js/2014/ContentEditable/

咱们来个殊效吧,经由过程开启div元素编辑,是不是是能拔出图片,这是须要用到js了。


复制代码代码以下:
<script>
function img(){
var location1 = 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代码了。望列位攻城(元勋)们阐扬极致,盼分享!

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

27
04月
win平台装置设置装备摆设Nginx+php+mys

1.筹办任务(1)PHP 版本5.6.17 下载地点 PHP官网 网页设想 下载地点(2)Nginx 版本1.8.0 下载地点 Nginx官... >>概况

27
04月
最新版本PHP 7 vs HHVM 多角度比

PHP 是最风行的用于 web 开辟的剧本说话之一。PHP 的最新版本,PHP 7 在机能上做了很大的优化。不过,PHP 另有一个协作敌手 ... >>概况

17
04月
苹果推出多项办法 力求争夺中国的利用开辟者

对苹果来讲, 中国事很是主要的市场. 和天下最大挪动经营商中挪动协作, 仅仅苹果中国计谋的一局部. 另外一局部是争夺中国开辟者, 让他们开... >>概况

30
04月
PHP5 的东西赋值机制先容

复制代码 代码以下: <?php class SimpleClass{ public $var = "a default value"... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站