前端开发

javascript实现双击编辑可修改状态的方法

这是现在流行的一个表单特效，在网页上单击某文字，文字变为编辑状态，或者是让输入新文字，这就是JavaScript控制表单的一个例子，下面的这段代码就实现了用户名和签名档的双击可编辑功能。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-double-click-edit-style-codes/

具体代码如下：

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();
}




 
你的用户名:
 三人行团队
 
你的个性档
 我闪故我在