16. Element contentEditable 属性

实例

把 <p> 元素的内容设置为可编辑：
document.getElementById("myP").contentEditable = true;

<!DOCTYPE html>
<html>
<body><p id="myP">这是一个段落。请点击按钮进行编辑。</p><button onclick="myFunction()">试一下</button><p id="demo"></p><script>
function myFunction() {document.getElementById("myP").contentEditable = true;document.getElementById("demo").innerHTML = "现在这个 p 元素可编辑。请尝试改变其文本。";
}
</script></body>
</html>

定义和用法
contentEditable 属性设置或返回元素内容是否可编辑。
提示：您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。

例子 2
对是否能够对 < p> 元素的内容进行编辑进行切换：

<!DOCTYPE html>
<html>
<body><p id="myP" contenteditable="true">请尝试改变此文本。</p><button onclick="myFunction(this);">禁用 p 元素文本编辑！</button><p id="demo"></p><script>
function myFunction(button) {var x = document.getElementById("myP");if (x.contentEditable == "true") {x.contentEditable = "false";button.innerHTML = "启用 p 元素文本编辑！";} else {x.contentEditable = "true";button.innerHTML = "禁用 p 元素文本编辑！";}
}
</script></body>
</html>

16. Element contentEditable 属性相关推荐

contenteditable属性让div也可以当做输入框
你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
CSS中的contenteditable属性
contenteditable属性:使一个元素变为可编辑的状态 contenteditable="true" #开启文本编辑 contenteditable="false ...
vue实现带样式的textarea输入框，contenteditable属性应用
提示:vue中使用contenteditable 文章目录前言一.contenteditable 什么是contenteditable: 二.contenteditable的使用总结前言开发 ...
2.2.1新增-contentEditable属性
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...
android H5+app混合应用之 - contenteditable属性
现在是智能终端遍天下,各种APP如雨后春笋般,掘地突起.这让我们做前端的兄弟姐妹们有些忙不过来,一边忙学习各种新知识如H5.CSS3.JS 等,一边面对着各种需求问题,PC端好不容易能弄的差不多了,现 ...
html光标自动定位到文本框,html元素contenteditable属性如何定位光标和设置光标
最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...
div可编辑，contenteditable 属性
1.添加contenteditable属性让文本处于可编辑状态, 实例 <div contenteditable="true">这里可以编辑</div> c ...
可编辑属性html,设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
摘要:这篇HTML栏目下的"设置contenteditable属性可编辑HTML标签的内容(可代替textarea)",介绍的技术点是"contenteditable.t ...
contentEditable属性
前言我们最常用的输入文本内容便是input与textarea,但是有一个属性,可以让我们在很多标签中,如div,table,p,span,body等,可以像input输入框一样,实现文本编辑,这便是 ...
HTML contenteditable 属性
今天无意中看到这个属性,特此记录一下. 浏览器支持所有主流浏览器都支持 contenteditable 属性定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素 ...

16. Element contentEditable 属性

16. Element contentEditable 属性相关推荐

最新文章

热门文章