需求描述：在一段文字處雙擊可以進行修改，也就是雙擊後創建輸入框，輸入內容，在輸入框失去焦點後將輸入的內容再以文字的形式顯示出來，以下是html代碼：

1 <fieldset>
2         <legend>雙擊用戶名進行編輯</legend>
3         <dl>
4             <dt>你的用戶名:</dt>
5             <dd ondblclick="ShowElement(this)">諸葛亮</dd>
6         </dl>
7     </fieldset>

以下是摘錄的JavaScript代碼：

 1 <script type="text/javascript">
 2         function ShowElement(element) {
 3             var oldhtml = element.innerHTML;
 4             //創建新的input元素
 5             var newobj = document.createElement(‘input‘);
 6             //為新增元素添加類型
 7             newobj.type = ‘text‘;
 8             //為新增元素添加value值
 9             newobj.value = oldhtml;
10             //為新增元素添加光標離開事件
11             newobj.onblur = function() {
12                 element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
13                 //當觸發時判斷新增元素值是否為空，為空則不修改，並返回原有值 
14             }
15             //設置該標簽的子節點為空
16             element.innerHTML = ‘‘;
17             //添加該標簽的子節點，input對象
18             element.appendChild(newobj);
19             //設置選擇文本的內容或設置光標位置（兩個參數：start,end；start為開始位置，end為結束位置；如果開始位置和結束位置相同則就是光標位置）
20             newobj.setSelectionRange(0, oldhtml.length);
21             //設置獲得光標
22             newobj.focus();
23 
24         }
25     </script>

這裏存在一個小問題，就是當已經雙擊一次的情況下，input已存在，再次雙擊，會出現input的內容被替換為上次雙擊的input的html代碼。

解決方案是判斷是否已存在input標簽，如果存在，直接return，不做任何操作。

以下是修改後的Js代碼：

 1 <script type="text/javascript">
 2         function ShowElement(element) {
 3             var oldhtml = element.innerHTML;
 4             //如果已經雙擊過，內容已經存在input，不做任何操作
 5             if(oldhtml.indexOf(‘type="text"‘) > 0){
 6                 return;
 7             }
 8             //創建新的input元素
 9             var newobj = document.createElement(‘input‘);
10             //為新增元素添加類型
11             newobj.type = ‘text‘;
12             //為新增元素添加value值
13             newobj.value = oldhtml;
14             //為新增元素添加光標離開事件
15             newobj.onblur = function() {
16                 element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
17                 //當觸發時判斷新增元素值是否為空，為空則不修改，並返回原有值 
18             }
19             //設置該標簽的子節點為空
20             element.innerHTML = ‘‘;
21             //添加該標簽的子節點，input對象
22             element.appendChild(newobj);
23             //設置選擇文本的內容或設置光標位置（兩個參數：start,end；start為開始位置，end為結束位置；如果開始位置和結束位置相同則就是光標位置）
24             newobj.setSelectionRange(0, oldhtml.length);
25             //設置獲得光標
26             newobj.focus();
27 
28         }
29     </script>

JS實現雙擊編輯可修改