使用过奇博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.vevb.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.vevb.com</dd></dl></body></html>好了，大家可以直接复制上段代码进行本地测试。
新闻热点
疑难解答
