使用過奇博CMS(qibosoft.com)的用戶都應該知道，奇博CMS的一個最大的特點優勢是，它的所有的模板是可以前臺雙擊在線編輯的，就是實現可視化編輯功能，這個特點對于新手來說是非常有用很方便的，那么如何實現這樣的一個功能呢？361源碼下面給大家分享一段利用javascript實現雙擊編輯可修改狀態的方法，運行效果如下：
在網頁前臺雙擊修改區域可以直接修改。代碼如下：
<!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>javascript實現雙擊編輯可修改狀態的方法 361源碼 www.survivalescaperooms.com</title><meta http-equiv="content-type" content="text/html;charset=utf8"><script type="text/javascript">function ShowElement(element){var oldhtml = element.innerHTML;var newobj = document.createElement('input');//創建新的input元素newobj.type = 'text';//為新增元素添加類型newobj.onblur = function(){element.innerHTML = this.value ? this.value : oldhtml;//當觸發時判斷新增元素值是否為空，為空則不修改，并返回原有值}element.innerHTML = '';element.appendChild(newobj);newobj.focus();}</script></head><body><dl> <dt>網站名稱:</dt> <dd ondblclick="ShowElement(this)">草根學習網</dd> <dt>網站網址：</dt> <dd ondblclick="ShowElement(this)">www.survivalescaperooms.com</dd></dl></body></html>好了，大家可以直接復制上段代碼進行本地測試。
新聞熱點
疑難解答
