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

来源：互联网发布：犹他大学世界排名知乎编辑：程序博客网时间：2024/05/20 15:18

方法一（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>

0 0