Html双击使文字可编辑的方法

发布于 / JavaScript / Comments Off on 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即可。

效果如下:

双击我可以编辑

单击我可以编辑

转载原创文章请注明,转载自: 斐斐のBlog » Html双击使文字可编辑的方法
评论已关闭