在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑:

设置contenteditable="true"标签内的元素(内容)可以编辑

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.  
  5. <div contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</div>
  6. <p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
  7.  
  8. <ul>
  9. <li contenteditable="true">
  10. <p >这是一段可编辑的段落。请试着编辑该文本。</p>
  11. </li>
  12. </ul>
  13.  
  14. </body>
  15. </html>

如果不设置contenteditable的值默认为false,不可以编辑的元素。

更详细介绍:http://www.w3school.com.cn/html5/att_global_contenteditable.asp

测试地址地址:http://www.w3school.com.cn/tiy/t.asp?f=html5_global_contenteditable

contentEditable属性设置是否可编辑元素的内容的更多相关文章

  1. HTML5-contentEditable属性规定是否可编辑元素的内容

    contentEditable='true' :可以编辑 contentEditable='false' :不可以编辑

  2. 使用div 的 contenteditable属性,实现输入编辑,输入 "#" 出现下拉选择

    文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下:   具体代码可以看 https://github.com/YalongYan/e ...

  3. contenteditable 属性

    定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...

  4. Visual Studio 2010 C++ 属性设置基础

    在 <Visual Studio 2010 C++ 工程文件解读>中提到了C++工程中可以进行用户自定义的属性设置,如何进行属性设置呢? 下面我们来了解一下 props 文件的基本规则: ...

  5. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  6. html -- contenteditable 属性:指定元素内容是否可编辑

    所有主流浏览器都支持 contenteditable 属性 定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时, ...

  7. html元素contenteditable属性如何定位光标和设置光标

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...

  8. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  9. Appium学习实践(二)Python简单脚本以及元素的属性设置

    1.简单的Python脚本 Appium中的设置与Appium学习实践(一)简易运行Appium中的一致 Launch后,执行脚本 #coding:utf-8 import unittest impo ...

随机推荐

  1. iOS 清除web cookies

    NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage]; ...

  2. fcc

    function spinalCase(str) { if(str.split(/\W|_/).length==1){ for(var i=0;i<str.length;i++){ if(/[A ...

  3. 第二章:k-近邻算法

    本章内容k-近邻分类算法从文本文件中解析和导人数据 使用Matplotlib创建扩散图归一化数值 2.1 k-近邻算法概述简单地说,k-近邻算法采用测量不同特征值之间的距离方法进行分类.

  4. shell 条件判断语句整理

    常用系统变量 1)         $0 当前程式的名称 2)         $n 当前程式的第n个参数,n=1,2,…9 3)         $* 当前程式的任何参数(不包括程式本身) 4)   ...

  5. 转载:[转]如何学好3D游戏引擎编程

      [转]如何学好3D游戏引擎编程 Albert 本帖被 gamengines 从 游戏引擎(Game Engine) 此文为转载,但是值得一看. 此篇文章献给那些为了游戏编程不怕困难的热血青年,它的 ...

  6. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  7. 用sql取出来的list需要处理成map的两种情况

    1. 原生sql: select a.id,a.name from a SQLQuery sqlQuery=this.getSession().createSQLQuery(sb.toString() ...

  8. select 取的是session里面的值时

    原来是写了一个select标签,然后用js循环取出来,发现问题是本来嵌在页面右边的页面整个弹出来, 后来改成html:optionsCollection就好了: 效果图:

  9. PHP程序员如何突破技术瓶颈

    身边有几个做PHP开发的朋友,也接触到不少的PHP工程师,他们常疑虑自己将来在技术上的成长与发展,我常给他们一些建议,希望他们能破突自己,有更好的发展. 先明确我所指的PHP工程题,是指毕业工作后,主 ...

  10. LINUX下常用SHELL指令

    Linux Shell常用shell命令 一.文件.目录操作命令 1.ls命令 功能:显示文件和目录的信息 ls 以默认方式显示当前目录文件列表 ls -a 显示所有文件包括隐藏文件 ls -l 显示 ...