需求描述：在一段文字處雙擊可以進行修改，也就是雙擊后創建輸入框，輸入內容，在輸入框失去焦點后將輸入的內容再以文字的形式顯示出來，以下是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代碼：
<script type="text/javascript"> function ShowElement(element) { var oldhtml = element.innerHTML; //如果已經雙擊過，內容已經存在input，不做任何操作 if(oldhtml.indexOf('type="text"') > 0){ return; } //創建新的input元素 var newobj = document.createElement('input'); //為新增元素添加類型 newobj.type = 'text'; //為新增元素添加value值 newobj.value = oldhtml; //為新增元素添加光標離開事件 newobj.onblur = function() { //當觸發時判斷新增元素值是否為空，為空則不修改，並返回原有值 if(this.value && this.value.trim()!==""){ element.innerHTML = this.value == oldhtml ? oldhtml : this.value; } else { element.innerHTML = oldhtml; } } //設置該標簽的子節點為空 element.innerHTML = ''; //添加該標簽的子節點，input對象 element.appendChild(newobj); //設置選擇文本的內容或設置光標位置（兩個參數：start,end；start為開始位置，end為結束位置；如果開始位置和結束位置相同則就是光標位置） newobj.setSelectionRange(0, oldhtml.length); //設置獲得光標 newobj.focus(); } </script>
歡迎指正，謝謝閱讀~