点击文字变成可编辑的文本

最新推荐文章于 2024-06-12 09:52:53 发布

原创最新推荐文章于 2024-06-12 09:52:53 发布 · 1.7w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何通过JavaScript和HTML的contentEditable属性实现网页上的文本编辑功能。一种方法使用jQuery来动态创建和切换文本框与文本显示状态，另一种方法则直接利用HTML元素的contentEditable属性使文本可编辑。

方法一（JS控制）：
首先弄清楚我们完成这个工作要做些什么：
1、点击文创建一个文本框（input）；
2、将原文字的内容放到文本框里；
3、当我们点击别的区域时文本框变成不可编辑的文本；
4、此时文字应该是修改过后的（如果有修改）；
搞清楚原理那么实现起来就很简单了，附上源代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        p{ line-height: 30px; font-size: 26px; margin: 50px; }
        .edit{ height: 30px;line-height: 30px; font-size: 16px; padding: 0 10px;  }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script>
    $(function(){
        $('p').click(function(){
            var td=$(this); //为后面文本框变成文本铺垫
            var text=$(this).text();
            var input=$('<input type="text" class="edit" value="'+text+'">');
            $(this).html( input );

            $('input').click(function(){
                return false;
            }); //阻止表单默认点击行为

            $('input').select(); //点击自动全选中表单的内容

            $('input').blur(function(){
                var nextxt=$(this).val();
                td.html(nextxt);
            }); //表单失去焦点文本框变成文本

        });
    })
    </script>
</head>
<body>
    <p>这是一段可以编辑的文字</p>
</body>
</html>

在这段代码中关于开始为变量td赋值this,这是因为后面点击别的地方时需要将文本框变成文字，而html()函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容。该函数的用途相当于设置或获取DOM元素的innerHTML属性值。就是说表单元素是不能使用html()这个方法的，所以在之前用个中间变量存储this的值。
方法二：
contentEditable是html中的一个属性。设置html的contentEditable=‘true’时，即可开启该元素的编辑模式。

<p contenteditable = "true">这是一段可以编辑的文字</p>