html中div双击可编辑方法

时间:2024-03-11 15:02:02

<tr><td><p id="" ondblclick="ShowElement()">双击可编辑</p></td><tr>



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