html语言编辑方法,Html双击使文字可编辑的方法

JS代码：

function update(id,html){  //编辑后焦点离开文本框时执行的方法

alert("id："+id+"；新内容："+html);

}

function ShowElement(id) {  //双击使文本可编辑

var oldhtml = document.getElementById(id).innerHTML;

var newobj = document.createElement('textarea');

newobj.type = 'text';

newobj.value = oldhtml;

newobj.onblur = function() {

document.getElementById(id).innerHTML = this.value == oldhtml ? oldhtml : this.value;

update(id,document.getElementById(id).innerHTML);

}

document.getElementById(id).innerHTML = '';

document.getElementById(id).appendChild(newobj);

newobj.setSelectionRange(0, oldhtml.length);

newobj.focus();

}

调用时直接在希望双击可编辑的文本标签添加id="xxx" οndblclick="ShowElement(xxx)"即可。

希望单击时可编辑只需将ondblclick改为onclick即可。

效果如下：

双击我可以编辑

单击我可以编辑