JS
<script language="javascript">
<!--
function $(e){
return document.getElementById(e);//封装获取函数
}
function edit(e){
//parseInt
$(e).style.display="none";
$(e+"fm").style.display="block";
$(e+"fm").childNodes[0].focus(); //div的子元素自动获得焦点
}
function hide(e){
//parseInt
str=$(e).childNodes[0].value;//获得文本框值
$(e).style.display="none";
$(e=e.replace("fm","")).style.display="block";
$(e).innerText=str;//为div赋值
}
-->
</script>
CSS
<style type="text/css">
.show{width:150px;height:20px;}
.hide{width:150px;height:20px;display:none;}
</style>
Html
<div class="formLabel" id="Name">Name:</div>
<div class="show" id="Name" runat="server" onclick="edit(this.id)"></div>
<div class="hide" id="Namefm">
<asp:TextBox id="Name" runat="server" onBlur="hide(this.parentNode.id)" ></asp:TextBox>
</div>
组合在一起就可以看到效果了。
不过要达到MSN上的编辑效果就还差一点
当TextBox失去焦点的时候,如何在后台将数据保存到数据库。