当前位置：首页 > 设计在线 > 网页设计 > CSS/Xhtml > 双击文本文字后实现编辑文本功能

双击文本文字后实现编辑文本功能

点击次数：36 次 发布日期：2008-11-21 16:03:29 作者：源代码网
源代码网推荐
以下为引用的内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTML://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML xmlns="HTML://www.w3.org/1999/xHTML">
<head>
<meta HTML-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<meta name="author" content="wuleying">
<title>双击文本文字后实现编辑文本功能</title>
<style>
input.t {border:1px solid #fff;background:#fff;}
input.s {border:1px solid #369;background:#fff;}
</style>
</head>
<body>
<input class="t" id="test" readonly value="这里是标题,双击文字后实现编辑文本功能" /><input type="submit" value="修改" style="display:none;" id="submit" />
<script type="text/javascript">
var test = document.getElementById("test");
var mysubmit = document.getElementById("submit");
test.ondblclick = function()
{
 this.readOnly = false;
 this.className = "s";
 mysubmit.style.display = "";
}
mysubmit.onclick = function()
{
 test.readOnly = true;
 test.className = "t";
 this.style.display = "none";
}
</script>
</body>
</HTML>
源代码网供稿.
网友评论 (0)
我也要写评论
会员中心
设计在线
本站推荐
设计在线之精华