鼠标双击文字进行编辑文本表单特效

2013-07-11 20:21:04 DIV+CSS的可编辑表单之鼠标双击文字进行编辑文本的表单特效，提供图例与在线演示，同时打包下载

DIV+CSS的可编辑表单之鼠标双击文字进行编辑文本的表单特效，提供图例与在线演示，同时打包下载。双击文本后变成输入框可编辑模式，并可提交修改。

可进入编辑模式的特效截图
双击文字可编辑文字表单input特效截图

<!DOCTYPE HTML> 
<HTML xmlns="HTML://www.w3.org/1999/xHTML"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>双击文字进行文本编辑 在线演示 yfnd.net</title> 
<style> 
input.t {border:1px solid #fff;background:#fff; font-size:14px;
 padding-left:5px; height:30px; line-height:30px; width:300px} 
input.s {border:1px solid #369;background:#fff; padding-left:5px;
 height:30px; line-height:30px; width:300px} 
</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>

复制以上完整HTML+JS代码即可使用。

在线演示：查看案例

打包下载：

立即下载（1.197KB）