html、jq点击文字可以编辑

最新推荐文章于 2023-11-11 05:41:08 发布

栖身星河之中

最新推荐文章于 2023-11-11 05:41:08 发布

阅读量1k

点赞数 2

分类专栏： JS笔记 html 文章标签： html jquery

本文链接：https://blog.csdn.net/ml12818/article/details/118305058

版权

html 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

JS笔记

5 篇文章 0 订阅

订阅专栏

效果图,点击文字出现文本框进行编辑

1.项目需要双击文字可以编辑的功能，HTML的contenteditable 属性可以做到。 2.并且所有主流浏览器都支持contenteditable 属性，这就很棒了！不过，当元素中没有设置contenteditable属性时，元素将从父元素继承属性。

值	描述
true	指定元素是可编辑的
false	指定元素是不可编辑的

语法：

<p class="edit" contenteditable="true">名称</p>

方法一：

可以通过.box找到子元素点击时添加contenteditable属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".box").children('.text').each(function(){
                $(this).on('click',function(){
                    $(this).attr('contentEditable','true');
                });
            })
        })
    </script>
</head>
<body>
    <div class="box">
        <p class="text">名称</p>
    </div>
</body>
</html>

方法二：

<span contenteditable="true">点击我可用编辑</span>

直接在span标签里面加contenteditable属性

栖身星河之中

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html、jq点击文字可以编辑

效果图,点击文字出现文本框进行编辑1.项目需要双击文字可以编辑的功能，HTML的contenteditable 属性可以做到。 2.并且所有主流浏览器都支持contenteditable 属性，这就很棒了！不过，当元素中没有设置contenteditable属性时，元素将从父元素继承属性。值描述true指定元素是可编辑的false指定元素是不可编辑的语法：<p class="edit" contenteditable="true">名称</.
复制链接

扫一扫