2.2.1新增-contentEditable属性

2024-01-30 12:58

本文主要是介绍2.2.1新增-contentEditable属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/><title>2.2.1新增-contentEditable属性</title></head><body>HTML5为大部分HTML元素都增加了contentEditable属性,如果将该属性设为true,那么浏览器将会允许开发者直接编辑该HTML元素里内容。此处的HTML元素并不是指那些原本就允许用户输入的表单元素,如文本框、文本域之类的,而是可以把table、div等元素变成可编辑状态。<br>contentEditable属性具有“可继承”的特点:如果一个HTML元素的父元素是“可编辑”的,那么它默认也是可编辑的,除非显式指定contentEditable="false"。<br>eg:将div、table元素转换成可编辑状态。<br><!-- 直接指定contentEditable="true"表明该元素是可编辑的 --><div contentEditable="true" style="width:500px;border:1px solid black">疯狂Java讲义<!-- 该元素的父元素有contentEditable="true",因此该表格也是可编辑的 --><table style="width:420px;border-collapse:collapse" border="1"><tr><td>疯狂Java讲义</td><td>疯狂Android讲义</td></tr><tr><td>轻量级Java EE企业应用实战</td><td>经典Java EE企业应用实战</td></tr></table></div><hr/><!-- 这个表格默认是不可编辑的双击之后该表格变为可编辑状态 --><table id="target" οndblclick="this.contentEditable=true;"style="width:420px;border-collapse:collapse" border="1"><tr><td>Java</td><td>Ruby</td></tr><tr><td>C/C++</td><td>Python</td></tr></table><br><br>除此之外,HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性,当该元素处于可编辑状态时,该属性返回true,否则返回false。<br>当用户编辑完成后,用户编辑的内容就会直接显示在该页面中(不要刷新页面,一旦刷新页面就会重新加载,编辑的内容会丢失),开发者可以通过该元素的innerHTML属性来获取编辑后的内容。</body>
</html>

这篇关于2.2.1新增-contentEditable属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/660316

相关文章

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作