標籤：
代碼並不重要，關鍵是思路，這裡簡要說一下：
1.展示的時候直接將內容展示在文字框中，文字框的邊框設定為0，也可以在設定一下readonly，這樣在展示到頁面上的時候給人一種普通文本的假象， 實際是顯示在邊框為0的文字框中，給文字框加單擊或者雙擊事件，觸發時將邊框更改為1，並且去掉readonly屬性，這樣就可以修改了，同時也要有失去 焦時間點事件，失去焦點時通過ajax將相應的資料發送到伺服器端進行修改，修改成功文字框恢複原狀。這種方式給使用者一種假象，有時體驗不太好，比如設定雙擊 觸發事件，而單擊時就會出現游標（雖然有readonly不能改）。下面再說一種方式。
2.展示的時候內容直接展示在一些容器類標籤中例如<span>標籤，單擊或雙擊時同樣觸發事件，將內容更改為文字框，並且將 是原來容器中的內容作為文字框中的value，設定失去焦時間點事件，當失去焦點時觸發事件通過ajax實現修改，並且再將文字框的位置替換為修改後的內容， 當然還有一些細節，比如沒有做任何修改的情況下失去焦點，這樣就不應該發送資料到伺服器端了。給出代碼如下：
<!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>
通過js實現單擊或雙擊直接修改內容
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
