1.contenteditable 属性指定元素内容是否可编辑。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

所有主流浏览器都支持 contenteditable 属性

语法

<element contenteditable="true|false">
<!DOCTYPE html>

<html>

<body>

<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>

</body>

</html>

　2.draggable 属性规定元素是否可拖动。

提示： 链接和图像默认是可拖动的。

提示： draggable 属性经常用于拖放操作。

语法

<element draggable="true|false|auto">
true 规定元素是可拖动的。
false 规定元素是不可拖动的。
auto 使用浏览器的默认特性。 
<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script type="text/javascript">

function allowDrop(ev){

　　ev.preventDefault();

}

function drag(ev){

　　ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev){

　　var data=ev.dataTransfer.getData("Text");

　　ev.target.appendChild(document.getElementById(data));

　　ev.preventDefault();

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />

<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>

</html>

　　

HTML5新属性的更多相关文章

  1. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  2. （二）给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

  3. 【HTML】html5新属性-datalist

    摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...

  4. HTML5新属性-----拖放

    最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...

  5. HTML5 新属性的讲解

    1.选择器: 标签选择器: class选择器: id选择器: 后代选择器:div li div下所有li 子代选择器:div>li div的所有子一代 li 元素 交集选择器:div.class ...

  6. html5 新属性

    <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> <input id="email&qu ...

  7. html5新属性contenteditable 对于那些不可编辑的标签，现在都可以编辑了

    contenteditable = true 表示该html标签的内容可以编辑,对于那些不可编辑的标签,现在都可以编辑了.

  8. sad 关于一些html5新属性还需要用https才能支持

    像我昨天在搞一个录音的小东西 在本地正常录音正常播放 但是放到线上环境http环境上就出现了如上的错误 功能都不能正常使用 然后就改成https线上环境  然后就正常了 如上 大家有什么赐教的欢迎留言 ...

  9. HTML5新的标签和属性

    <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...

随机推荐

  1. Http 信息头

    Http协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET.POST.PUT.DELETE.一个URL地址用于描述一个网络上的资源,而HTTP中的GET.POST.PUT. DELETE就 ...

  2. My97DatePicker使用的问题

    我在iframe中使用My97DatePicker时,发现第一次点击左边的菜单时,在右边的页面可以弹出日期框: 当我第二次点击菜单时,右边的日期文本框却弹出了页面的内容,而不是日期选择框: 首先怀疑是 ...

  3. 发现一个不错的学习git的地方

    Git入门:http://rogerdudler.github.io/git-guide/index.zh.html 简洁.实用.高效的学习git基本操作的方式

  4. logfile提示stale错误解决方法

    产生该错误的原因解释如下: Explanation: ============ A stale redo log file is one that Oracle believes might be i ...

  5. docker 使用Data Volume 共享文件

    Adding a data volume You can add a data volume to a container using the -v flag with the docker run  ...

  6. UIButton控件

    UIButton继承关系如下: UIButton-->UIControl-->UIView-->UIResponder-->NSObject 由于继承层次过多,下面只重点介绍U ...

  7. 在C#中调用Win32函数EnumWindows枚举所有窗口。

    原文 http://www.cnblogs.com/mfm11111/archive/2009/06/30/1514322.html 开发旺旺群发软件,难点及重要技术点分析(一) 一．        ...

  8. EasyUI两种动态添加tab Iframe页面的方法

    /** 动态添加tab-----方式一 **/ function addIframeTab(titleTxt,href,icon) { $('#mytabs').tabs('addIframeTab' ...

  9. poj1050(nyoj104 zoj1074)dp问题

    To the Max Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39913   Accepted: 21099 Desc ...

  10. OpenSuSE zypper repo及Desktop媒体播放器设置 for OpenSuSE12.

    1.禁用官方源和DVD光盘源,启用中国大陆源 使用DVD光盘安装好openSUSE 12.2之后,软件安装源中默认存在一个名称为”openSUSE-12.2-1.6″的软件源,这个源的URL实际上是指 ...