JavaScript实现双击内容变为可编辑状态

本文参考了JS实现双击内容变为可编辑状态
先放上源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现双击编辑可修改状态</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
    function ShowElement(element) {
        var oldhtml = element.innerHTML;
        //创建新的input元素
        var newobj = document.createElement('input');
        //为新增元素添加类型
        newobj.type = 'text';
        //为新增元素添加value值
        newobj.value = oldhtml;
        //为新增元素添加光标离开事件
        newobj.onblur = function() {
            element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
            //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
        }
        //设置该标签的子节点为空
        element.innerHTML = '';
        //添加该标签的子节点，input对象
        element.appendChild(newobj);
        //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
        newobj.setSelectionRange(0, oldhtml.length);
        //设置获得光标
        newobj.focus();
    }
</script>
</head>
<body>
    <dl>
        <dt>你的用户名:</dt>
        <dd ondblclick="ShowElement(this)">三人行</dd>
        <dt>你的个性档</dt>
        <dd ondblclick="ShowElement(this)">三人行，必有我师焉！</dd>
    </dl>
</body>
</html>

以上是使用ondblclick实现的双击触发ShowElement()函数

但本人在使用过程中发现，如果在已经双击的情况下在input框中再次双击，会出现这样的情况
alt 错误情况
这一定不是我们想要的情况

所以通过一番鼓捣(本人js小白)，终于得到解决

下面是我修改后的代码

function ShowElements(element,fn) {
    var oldHtml = element.innerHTML;
    //创建新的input元素
    var newObj = document.createElement('input');
    //为新增元素添加类型
    newObj.type = 'text'; 
    //获得原先的双击事件名称
    var attr = $(element).attr("ondblclick");
    // 移除原先的双击事件
    $(element).removeAttr("ondblclick");
    newObj.value = oldHtml;
    //为新增元素添加光标离开事件
    newObj.onblur = function() { 
        element.innerHTML = this.value == oldHtml ? oldHtml : this.value;
        // 还原原先的双击事件
        element.setAttribute("ondblclick",attr);
    };
    //设置该标签的子节点为空
    element.innerHTML = '';
    //添加该标签的子节点，input对象
    element.appendChild(newObj);
    //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
    newObj.setSelectionRange(0, oldHtml.length);
    //设置获得光标
    newObj.focus();
}

tips：不要修改 newObj.type = 'text' 如果对输入的内容有特殊要求，请用正则规范)

posted @ 2020-06-23 17:21  驭风的云  阅读(460)  评论(0)    收藏  举报