始终没有理解contentEditable的意思(页 1) - JavaScript论坛 - 编程论坛

sdlklhd 发表于 2008-2-19 09:35

始终没有理解contentEditable的意思

小弟我今天在学习到contentEditable时,怎么也不明白这是什么意思,书上也没有举例子,网上查到的也很少.
如果,哪位明白,能否说明一下,最好能有个例子.
在线等...

supertm 发表于 2008-2-19 11:14

文档上是这样说的
contentEditable String determining whether the element’s content is editable. Values are "inherit", "true", or "false". A value of "inherit" means that it will inherit the contentEditable property of its parent (this value is the default).
我理解的意思就是使这个元素可以编辑，例如
<div id="div">aaaa</div>
<script>document.getElementById('div').contentEditable = "true"</script>
那页面上这个div就可以修改内容了
可以和isContentEditable配合使用

sdlklhd 发表于 2008-2-19 11:35

有那么一点明白了。但是怎么能把编辑好的数据提交到数据库呢?

supertm 发表于 2008-2-19 11:42

用那个元素的innerHTML就可以取到当前修改以后的值了
document.getElementById('div').innerHTML

sdlklhd 发表于 2008-2-22 08:48

有道理.
感谢

ming206 发表于 2008-2-25 15:33

完整的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV编辑</title>
<style type="text/css">

</style>
</head>
<body>
<br />
<div><div id="div1" >我的原始内容！</div>
<div id="editBt" style="display:none"><input type="button" id="sss" value="编辑"/> <input type="button" id="rrrr" value="取消"/></div>
</div>
<script>
var oldText;
init();
function init()
{
var dobj=document.getElementById("div1");
var etobj=document.getElementById("editBt");
var submitbt=document.getElementById(String(etobj.firstChild.id));
var resitbt= document.getElementById(String(etobj.lastChild.id));
oldText=dobj.innerHTML;
dobj.ondblclick=function(){showEditDiv(dobj,etobj);}
submitbt.onclick=function(){edit(dobj,etobj);}
resitbt.onclick=function(){resits(dobj,etobj);}
}
/*
*切换到编辑状态
*/
function showEditDiv(d,et){
if(!d.isContentEditable){
   d.contentEditable = true;
   et.style.display="";
}
}
/*
* 获取编辑后的内容
*/
function edit(d,et){
var divText;
if(d.isContentEditable)
{
      divText=d.innerHTML;
d.contentEditable =false;
      et.style.display="none";
alert(divText);
}
}
/*
* 取消编辑
*/
function resits(od,et)
{
od.innerHTML=oldText;
od.contentEditable =false;
et.style.display="none";
}
</script>
</body>
</html>

页: [1]

编程论坛's Archiver

始终没有理解contentEditable的意思