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" ondblclick="ShowElement(xxx)"即可。

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

效果如下：

双击我可以编辑

单击我可以编辑