如何将网页中不是文本框的内容变成可编辑状态

我们有时打开网页，里面的文字可以编辑，这是怎么做到的呢？

它就要用到contentEditable 属性了，如果将该属性这位ture，浏览器就会允许开发者直接编辑该HTML元素中的内容。这里的HTML元素不是原本就允许用户输入的文本框和文本域之类的，而是可以将、元素变成可编辑状态。

看下面代码，把contentEditable设置为true。

看到网页效果第一个表可以直接编辑，第二个表格需要双击后可编辑，他们有什么区别呢？

另外，contentEditable 属性由可继承的特点，如果父元素可编辑，那它也可以编辑。如果设置为false，就不能编辑。

除了contentEditable属性可以控制“可编辑”外，designMode属性也可控制，而不同的是designMode的属性设置为on时，该页面上可支持contentEditable属性的元素都变成可编辑状态，使用时必须设置为on，默认为off。

以下是浏览器显示效果。

值得注意的是，编辑的内容不能保存，如果重新刷新了，修改的内容就会变回原来内容。

如果分享的对你有帮助，麻烦请订阅关注。