javascript实现点击文本出现文本编辑状态，移开后变成文本

javascript代码如下：

//获得初始文本，设置为隐藏，然后判断是否已有输入域，如果没有则创建输入框
  function hiddenEle(id) {
          var titleP = document.getElementById("item_" + id);
          titleP.style.display = "none";	          
          if (!document.getElementById("title_input_" + id)) {
              buildEditDiv(titleP.parentNode, id);
          }
      }
  	//创建输入框和保存按钮
      function buildEditDiv(titleDiv, id) {
    	  
          var editText = document.createElement("input");
          var titleP = document.getElementById("item_" + id);
          var oldTitle = titleP.firstChild.data;
          editText.setAttribute("class", "newItemTitle");
          editText.setAttribute("type", "text");
          editText.value = oldTitle;
          editText.name = id;
          editText.id = "title_input_" + id;
          titleDiv.appendChild(editText);        
          var submitButton = document.createElement("button");
          submitButton.appendChild(document.createTextNode("保存"));
          submitButton.id = "title_button_" + id;
          submitButton.onclick = function () {
              ajaxChangeTitle(id, oldTitle, editText.value);
              return false;
          }
  		//这里输入框失去焦点后，设置了等待时间200ms才执行删除input和button操作，主要是为了在删除input之前，在button的onclick动作中能获得input的新值。
          editText.onblur = function () {
              setTimeout(function () {
                  titleDiv.removeChild(submitButton);
                  titleDiv.removeChild(titleDiv.lastChild);
                  titleDiv.removeChild(editText);
                 
                  titleP.style.display = "";
                 
              }, 200);
          }
          titleDiv.appendChild(submitButton);
          editText.focus();
      }
      function ajaxChangeTitle(id, oldTitle, newTitle) {
          var titleP = document.getElementById("item_" + id);
          titleP.firstChild.data = newTitle;
        if(newTitle!=null && newTitle!="")
        {       	
        	   if(oldTitle!=newTitle)
        	  {           	 
        	  editClub(id,newTitle);
        	  }
        }
        else  {
        	alert("不能为空");
        	window.location.reload();	
        	}
      }
     
      function showBgColor(ele) {
          ele.setAttribute("class", "itemTitleBg_c");
      }

      function hiddenBgColor(ele) {
          ele.setAttribute("class", "itemTitleBg");
      }
	 
      function showEle(id)
      {
    	 
    	  var titleP = document.getElementById("item_" + id);  	 	 
    	  if (document.getElementById("title_input_" + id)) {
    		  var text = document.createElement("span");
              text.value= titleP.firstChild.data ;
              var titleDiv = titleP.parentNode;
              titleDiv.appendChild(text);
          }
      }
function editClub(id,newTitle)
{	
 
	var str =id+','+newTitle;
	//alert(str);
  clubDwr.updateClub(str,editClubResult);
}
function editClubResult(result)
{
	if(result==1)
	{
	//	alert("编辑成功");
	}
	else if(result ==0)
	{
		alert("该名称已经存在");
		window.location.reload();	
	}
	else if(result == -1)
		{
		alert("未知错误");
	window.location.reload();	
		}
}

  <script type='text/javascript' src='./leedwr/engine.js'> </script>
<script type='text/javascript' src='./leedwr/util.js'></script>
<script type='text/javascript' src='./leedwr/interface/clubDwr.js'></script>
<script type='text/javascript' src="js/dwr/clubDwr.js"></script>


<td  class="bottom_line"  align="left" width="60%">  <span id="item_<s:property value="id"/>" class="itemTitleBg" οnmοuseοver="showBgColor(this)"   
            οnmοuseοut="hiddenBgColor(this),showEle('<s:property value="id"/>')" title="编辑" οnclick="hiddenEle('<s:property value="id"/>');" > <s:property value="name"/></span>  
          </td>