h5作品介绍_editable联动

h5作品介绍_editable联动其实这个属性很简单,既然把它放到一个单独的文章来说,他肯定有一些注意点要讲兼容性很好,兼容所有主流浏览器。用法很简单,只需要给你需要的标签填上即可。那么会出现一个神奇的效果。(文字可以编辑)语


Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

其实这个属性很简单,既然把它放到一个单独的文章来说,他肯定有一些注意点要讲

兼容性很好,兼容所有主流浏览器。

用法很简单,只需要给你需要的标签填上即可。

<div contenteditable="true">我是一个div</div>

 

那么会出现一个神奇的效果。(文字可以编辑)

h5作品介绍_editable联动

 

语法也很简单。

contenteditable=”true” (可以编辑)

contenteditable=”false” (不可以编辑)

 

如果是嵌套关系的呢?

<div contenteditable="true">
     我是一个div1
    <div>我是div2,没有contenteditable属性</div>
</div>

h5作品介绍_editable联动

 

你会发现,即使是嵌套关系,里面的标签也没有contenteditable 属性,也是可以编辑的,这又是为啥呢? 其实这个属性有继承关系,只要父级有,那么子级也会继承下来,所以说,子级也是可以编辑的啦。

如果子级不想编辑,给子级添加上contenteditable=“false” 即可

h5作品介绍_editable联动

 

 

最后说一下,下面这种特殊情况,按理来说,span 的 姓名 和 年龄都是不可以编辑的对吧。

<div contenteditable="true">
    <span contenteditable="false">姓名:</span>小明<br>
    <span contenteditable="false">年龄:</span>20岁
</div>

看下下面的操作。

h5作品介绍_editable联动

 

然后只要从 上面一行开始编辑,就会发现,即使是 contenteditable=“false” 的两个 span里面的文字,都被删除了。这又是为啥呢,这是因为,被标记了 false的标签,那么他的内部文字是不能被编辑的,但是 外部的编辑,是可以把你整个标签给删除掉的。 所以得避开这种布局。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/166698.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Python –函数学习3 (将函数存储在模块中)

    Python –函数学习3 (将函数存储在模块中)

    2021年7月6日
  • cxf框架调用webservice_webservice json

    cxf框架调用webservice_webservice json本文主要包括以下内容ant工具的使用利用cxf实现webservicecxf与spring整合ajax访问webserviceant工具1、为什么要用到ant这个工具呢?Ant做为一种工具已经广泛被使用,并且历史悠久。使用ant的内置命令,可以编译java源文件(javac),运行java文件(java),给class文件打包(jar、war、ear),也可以创建(mkdir)、删除…

    2022年9月15日
  • 测试用例设计的八大要素「建议收藏」

    测试用例设计的八大要素「建议收藏」1、测试用例的八大要素用例编号和其他编号一样,测试用例编号是用来唯一识别测试用例的编号,要求具有易识别和易维护性,用户可以很容易根据用例编号获取到相应用例的目的和作用,在系统测试用例中,编号的一般格式为A-B-C-D这几部分的作用分别如下:A:产品或项目类型,如CMS(内容管理系统)、CRM(客户关系管理系统)B:一般用来说明用例的属性,如ST(系统测试)、IT(集成测试)、UT(单元测试)C:测试需求的表示,说明该用例针对的需求点,可包括测试项和测试子项等,如文档管理、客户投诉信息管理等。

    2022年6月28日
  • JAVA数组去重方法

    JAVA数组去重方法记录JAVA中数组去重方法1利用Set的特性去重复 Setset=newHasSet(); for(intx=0;x<arr.length;x++){ set.add(arr[x]); }最后set里面的值就是arr数组去重后的所有元素,但是set中数据是无序的,会打乱原本的顺序。2如果想保留原本的顺序就使用有顺序,不重复特点的链表的哈希集合 LinkedHasSet<Object>temp=newLinkedHasSet<>()

    2022年6月29日
  • 电子计算机主机房国标,中华人民共和国国家标准电子计算机机房设计规范GB50174-93…[通俗易懂]

    电子计算机主机房国标,中华人民共和国国家标准电子计算机机房设计规范GB50174-93…[通俗易懂]中华人民共和国国家标准电子计算机机房设计规范GB50174-93发布时间:2014年5月28日中华人民共和国国家标准电子计算机机房设计规范GB50174-93DesignCodeforElectronicComputerRo(1993年2月17日国家技术监督局、中华人民共和国建设部联合发布1993年9月1日实施)——————————————————————————–第一章总则第1….

    2022年10月2日
  • NOIP普及组套题_noip2019普及组试题

    NOIP普及组套题_noip2019普及组试题题目链接题目描述给定一个整数,请将该数各个位上数字反转得到一个新数。新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2)。输入格式一个整数N输出格式一个整数,表示反转后的新数。输入输出样例输入#1123输出#1321输入#2-380输出#2-83代码://P1307数字反转#include<iostream>#include<cstring>usingnamespacestd;

    2022年9月24日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号