点击文字出现文本框

点击后：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<style> 
body{font-size:14px;} 
input{border:none;font-size:14px;} 
.show{} 
.hide{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;display:none;} 
</style> 
<script language="javascript"> 
<!-- 
function $(e){ 
return document.getElementById(e);
} 
function edit(e){ 
$(e).style.display="none"; 
$(e+"fm").style.display="block"; 
$(e+"fm").childNodes[0].focus(); 
} 
function hide(e){ 
$(e).style.display="none"; 
$(e=e.replace("fm","")).style.display="block"; 
} 
--> 
</script> 
</HEAD> 
<BODY> 
<div class="show" id="test" onclick="edit(this.id)">可编辑的内容一</div> 
<div class="hide" id="testfm"><input type="text" name="nn" value="可编辑的内容一" onBlur="hide(this.parentNode.id)" /></div> 
</div> 
</BODY> 
</HTML>

 

posted @ 2013-03-29 17:08  tinyphp  Views(710)  Comments(0)  Edit  收藏  举报