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

時間 2019-12-11

原文原文鏈接

代碼並不重要，關鍵是思路，這裏簡要說一下：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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。