Textbox 点击编辑效果

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失去焦点的时候，如何在后台将数据保存到数据库。