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" onmouseover="showBgColor(this)"               onmouseout="hiddenBgColor(this),showEle('<s:property value="id"/>')" title="编辑" onclick="hiddenEle('<s:property value="id"/>');" > <s:property value="name"/></span>            </td>