經過js實現單擊或雙擊直接修改內容

   代碼並不重要,關鍵是思路,這裏簡要說一下:javascript

    1.展現的時候直接將內容展現在文本框中,文本框的邊框設置爲0,也能夠在設置一下readonly,這樣在展現到頁面上的時候給人一種普通文本的假象, 實際是顯示在邊框爲0的文本框中,給文本框加單擊或者雙擊事件,觸發時將邊框更改成1,而且去掉readonly屬性,這樣就能夠修改了,同時也要有失去 焦點事件,失去焦點時經過ajax將相應的數據發送到服務器端進行修改,修改爲功文本框恢復原狀。這種方式給用戶一種假象,有時體驗不太好,好比設置雙擊 觸發事件,而單擊時就會出現光標(雖然有readonly不能改)。下面再說一種方式。html

    2.展現的時候內容直接展現在一些容器類標籤中例如<span>標籤,單擊或雙擊時一樣觸發事件,將內容更改成文本框,而且將 是原來容器中的內容做爲文本框中的value,設置失去焦點事件,當失去焦點時觸發事件經過ajax實現修改,而且再將文本框的位置替換爲修改後的內容, 固然還有一些細節,好比沒有作任何修改的狀況下失去焦點,這樣就不該該發送數據到服務器端了。給出代碼以下:java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>(單擊)雙擊直接修改內容的代碼</title>

<script type="text/javascript">

function edit(element){

 var oldhtml = element.innerHTML;//得到元素以前的內容
 var newobj = document.createElement('input');//建立一個input元素
 newobj.type = 'text';//爲newobj元素添加類型
  newobj.value=oldhtml;
 element.innerHTML = '';   //設置元素內容爲空
 element.appendChild(newobj);//添加子元素
 newobj.focus();//得到焦點
  //設置newobj失去焦點的事件
 newobj.onblur = function(){
   //下面應該判斷是否作了修改並使用ajax代碼請求服務端將id與修改後的數據提交
   alert(element.id);
      //當觸發時判斷newobj的值是否爲空,爲空則不修改,並返回oldhtml
      element.innerHTML = this.value ? this.value : oldhtml;
   }
}
</script>

</head>
<body>

 姓名:<span id="1" ondblclick="edit(this)">張三</span><br/>
 家庭住址:<span id="2" ondblclick="edit(this)">張三</span><br/>

</body>

</html>ajax

相關文章
相關標籤/搜索