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

最新推荐文章于 2025-07-11 09:11:51 发布

原创最新推荐文章于 2025-07-11 09:11:51 发布 · 1.4w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 同时被 3 个专栏收录

1 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

html

0 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的双击编辑功能，通过简单的代码实现了网页内容的双击即编辑特性，同时解决了光标定位的问题，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。
我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再重新选择一下光标位置，这样的交互感觉不好；后来查到新的资料解决了此问题，希望可以帮助到更多的人。

代码部分：

注意：设置选择文本的内容或设置光标位置

<!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;
            //当触发时设置父节点的双击事件为ShowElement
            element.setAttribute("ondblclick", "ShowElement(this);");
        }
        //设置该标签的子节点为空
        element.innerHTML = '';
        //添加该标签的子节点，input对象
        element.appendChild(newobj);
        //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
        newobj.setSelectionRange(0, oldhtml.length);
        //设置获得光标
        newobj.focus();

        //设置父节点的双击事件为空
        newobj.parentNode.setAttribute("ondblclick", "");

    }
</script>
</head>
<body>
    <dl>
        <dt>你的用户名:</dt>
        <dd ondblclick="ShowElement(this)">三人行</dd>
        <dt>你的个性档</dt>
        <dd ondblclick="ShowElement(this)">三人行，必有我师焉！</dd>
    </dl>
</body>
</html>

双击事件：ondblclick