html实现可编辑文字效果

最新推荐文章于 2024-09-22 13:54:50 发布

原创最新推荐文章于 2024-09-22 13:54:50 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

Html+Js 专栏收录该内容

58 篇文章

订阅专栏

本文介绍了一种利用jQuery库实现网页中文字编辑的方法。通过点击编辑按钮，可将默认显示的文本转换为可编辑的输入框，允许用户修改内容。当用户完成编辑并离开输入框时，修改后的文本会自动保存并替换原有内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
<span class="t1">默认分组</span>

<a class="t2">编辑</a>

<p>说明：点击编辑，可修改默认分组的文字内容</p>

<script>
    $(function () {
//获取class为caname的元素
        $(".t2").click(function () {
            var td = $(".t1");
            console.info(td[0]);
            var txt = td.text();
//通过jquery构造对应的input标签元素
            var input = $("<input type='text' value='" + txt + "'/>");
            td.html(input);
            input.click(function () {
                return false;
            });
//获取焦点,trigger() 方法触发被选元素的指定事件类型。
            input.trigger("focus");
//文本框失去焦点后提交内容，重新变为文本
            input.blur(function () {
                var newtxt = $(this).val();
//判断文本有没有修改
                if (newtxt !== txt) {
                    td.html(newtxt);

                } else {
                    td.html(newtxt);
                }
            });
        });
    });
</script>
</body>
</html>