H5部分新增属性解析

最新推荐文章于 2023-06-20 14:23:52 发布

混名汪小星

最新推荐文章于 2023-06-20 14:23:52 发布

阅读量270

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_28835447/article/details/94856191

版权

H5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML5 HTML的第五个版本
H5一般指的是移动端的开发

新增的属性

placeholder
input中type类型
 draggable
contenteditable

-新增的属性--placeholder

如下举例说明：

< input type=“text” name=“fname” placeholder=“First name”>

可设置颜色

		<style>
			::-webkit-input-placeholder { /* WebKit, Blink, Edge */
			    color:    #909;
			}
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			   color:    #909;
			   opacity:  1;
			}
			::-moz-placeholder { /* Mozilla Firefox 19+ */
			   color:    #909;
			   opacity:  1;
			}
			:-ms-input-placeholder { /* Internet Explorer 10-11 */
			   color:    #909;
			}
			</style>

如下图：
在这里插入图片描述

新增的属性-- input中type类型

email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>

如下图：
在这里插入图片描述

url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证url 域的值。

<form action="/example/html5/demo_form.asp" method="get">
Homepage: <input type="url" name="user_url" /><br />
<input type="submit" />
</form>

如下图：
在这里插入图片描述

number

number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="10" />
<input type="submit" />
</form>

在这里插入图片描述

range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定对所接受的数字的限定，默认数值value，为设定最大和最小的中间值
step规定了滚轮改变数值的最小单位，

   Points:<input type="range" name="points" min="1" max="10" step="1"/>

如下图：
在这里插入图片描述

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

以上列举两项：
date - 选取日、月、年

Date: <input type="date" name="user_date" />

效果如下图：
在这里插入图片描述

month - 选取月、年

Month: <input type="month" name="user_date" />

如下：
在这里插入图片描述

search
search 类型用于搜索域

<input type="search" name="username">

如下图
在这里插入图片描述
提交表单后，再次鼠标聚焦会提示历史内容
如下图：

color

颜色输入框

在这里插入图片描述

表单元素(兼容性较差)
拓展：

< datalist> 元素规定输入域的选项列表。
属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

例子：

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

效果图如下：
在这里插入图片描述
拓展2：

< output> 元素用于不同类型的输出，比如计算或脚本输出
for属性用于计算输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

在这里插入图片描述

拖放（Drag 和 Drop）属性draggable

说明：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

 <img draggable="true">

拖拽事件
生命周期

1.鼠标按下，拖拽开始时触发 ondragstart
2.移动鼠标，拖拽中 ondrag
3.松开鼠标，拖拽结束 ondragend

拓展1：
event为触发时产生的对象，里面包含了事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event.clientX; event.clientY;为鼠标在浏览器中的坐标

拓展2：

DOM 中的 offset 属性
当元素的父节点为body时，offsetParent为window（浏览器窗口），
图例：
在这里插入图片描述
例子：

<body>
<div class="div01" draggable="true"></div>	   <!--将拖拽属性设置为true，可以拖拽-->
<script>
	var divdrag = document.getElementsByClassName("div01")[0] //绑定拖拽元素
	var starx = 0;                                           //设置拖拽元素位置初始化
	var stary = 0;  
	//拖拽开始
	divdrag.ondragstart = function(event){                     //  	设置拖拽元素的最开始拖拽位置的初始坐标
		starx = event.clientX;
		stary = event.clientY;
           
	}
	//拖拽移动中
	divdrag.ondrag = function(){
		console.log("mover")
	}
	//拖拽结束
	divdrag.ondragend = function(){           //拖拽结束后的位置坐标与起始位置的坐标之间的差，就是要定位元素的地方
		var x = event.clientX - starx;
		var y =event.clientY - stary;
		
		divdrag.style.top = divdrag.offsetTop + y + "px"
		divdrag.style.left = divdrag.offsetLeft + x+ "px"
	}
	
</script>

进入目标元素也有几个对应的事件

兼容性问题，目前版本的Firefox不支持

1，当拖拽元素进入区域触发（必须是鼠标进入） ondragenter
2，当拖拽元素的鼠标进入区域，不断触发 ondragover
3，当拖拽元素的鼠标进入区域后离开，触发 ondragleave
4，当拖拽元素的鼠标进入区域后松开鼠标，触发 ondrop

</head>
<body>
	<div class="div01">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JAVASCRIPT</li>
		</ul>
	</div>
	<div class="div02"></div>
	<script>		
		var lis = document.getElementsByTagName("li");
		var domEle;
		for(var i = 0; i < lis.length;i++){
			lis[i].setAttribute("draggable","true");
			lis[i].ondragstart = function(event){
				domEle = event.target || event.srcElement;
			}
		}

		var div02 = document.getElementsByClassName("div02")[0];
		div02.ondragover = function(event){    
			event.preventDefault();
		}
		div02.ondrop = function(event){ 
			div02.appendChild(domEle)	
			domEle = null;
		}

		var div01 = document.getElementsByClassName("div01")[0];
		div01.ondragover = function(event){    
			event.preventDefault();   //阻止默认行为，可以把这个行为给阻止掉，阻止事件冒泡
		}
		div01.ondrop = function(event){ 
			div01.appendChild(domEle)	
			domEle = null;
		}
	</script>

event.preventDefault(); 阻止默认行为，可以把这个行为给阻止掉，(阻止事件冒泡)

参考博客：事件冒泡、事件捕获和事件委托

contenteditable

定义
contenteditable 属性规定元素内容是否可编辑。
可以继承的，可以覆盖
可继承：父级元素中的所有contenteditable属性与父级一致
例子：

 <div contenteditable="true">hello world</div>

如图：
在这里插入图片描述

例2：

<div contenteditable="true">
		<span contenteditable="false">用户名：</span>
		<span>张三	</span>
	</div>

如下图：
在这里插入图片描述
可覆盖：父级中可以允许自己contenteditable属性与自己不一致
contenteditable="false"时为不可编辑状态，
但可以在父级元素为可编辑状态下作为最小编辑单位被整个删除

返回底部

混名汪小星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录