本文實例講述了JS實現(xiàn)雙擊編輯可修改狀態(tài)的方法。分享給大家供大家參考。具體如下：
這是現(xiàn)在流行的一個表單特效，在網(wǎng)頁上單擊某文字，文字變?yōu)榫庉嫚顟B(tài)，或者是讓輸入新文字，這就是JavaScript控制表單的一個例子，下面的這段代碼就實現(xiàn)了用戶名和簽名檔的雙擊可編輯功能。
運行效果如下圖所示：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-double-click-edit-style-codes/
具體代碼如下：
<!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>JS實現(xiàn)雙擊編輯可修改狀態(tài)</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><script type="text/javascript">function ShowElement(element){var oldhtml = element.innerHTML;var newobj = document.createElement('input');//創(chuàng)建新的input元素newobj.type = 'text';//為新增元素添加類型newobj.onblur = function(){element.innerHTML = this.value ? this.value : oldhtml;//當觸發(fā)時判斷新增元素值是否為空，為空則不修改，并返回原有值 }element.innerHTML = '';element.appendChild(newobj);newobj.focus();}</script></head><body><dl> <dt>你的用戶名:</dt> <dd ondblclick="ShowElement(this)">三人行團隊</dd> <dt>你的個性檔</dt> <dd ondblclick="ShowElement(this)">我閃故我在</dd></dl></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
