1. 属性list
与标签datalist
以及标签option
可实现文本框的下拉提示,其中datalist
的id
值必须与属性list
的值一致,option
标签写在标签datalist
中,如下所示:
<input type="text" list="mylist">
<datalist id="mylist">
<option>20141102@qq.com</option>
<option>20141102@qq.com</option>
<option>20141102@qq.com</option>
</datalist>
2. 属性contextmenu
与标签menu
以及menuitem
可实现点击右键出现自己设置的选项,其中menu
的id
值必须与属性contextmenu
的值一致,标签menuitem
写在menu
里面,如下,右键点击div
框,可出现"链接"属性,icon
用于设置属性前面的图标,点击链接,执行fx()
函数:
<div id="d" contextmenu="mymenu" width="100px" height="100px" border="1">
<menu id="mymenu" type="context">
<menuitem label="链接" icon="../img/HBuilder.png" onclick="fx()"> <menuitem>
</menu>
</div>
3. 拖拽事件.
属性draggable
有三个值:true表示元素可拖拽,false表示元素不可拖拽,auto表示浏览器默认的特性。
ondragstart
:元素开始拖动时;ondrag
:元素拖动时;ondragend
:元素拖拽结束时。
ondragenter
:元素进入指定区域时;ondragover
:元素在指定区域内移动时;ondrop
:元素投放在指定区域时。
拖拽事件必定少不了dataTransfer
,它跟数据处理有关,dataTransfer.setData("text","拖拽begin")
表示设置自定义数据格式。preventDefault()
方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
var liArray=document.getElementsByTagName("li");
for(var i=0;i<liArray.length;i++){
liArray[i].draggable=true;//li可移动
liArray[i].flag=false;//设置状态
liArray[i].ondragstart=function(){
this.flag=true;
}
liArray[i].ondragend=function(){
this.flag=false;
}
}
拖拽事件
event.ondragstart=function(e){
e.dataTransfer.setData("text","拖拽begin");
twoEle.innerHTML="begin...";
}
//投放区事件
event.ondragenter=function(e){
e.preventDefault()
}
4. HTML5之form表单:
HTML5的form表单与HTML4的form表单有所不同,写法和功能都有很大改进,也新增了一些type属性,但在浏览器支持方面有差异,谷歌和opera支持大部分属性,如email
,url
,data
,time
,color
,range
,search
,number
等。
email:自带邮箱验证功能,格式为xxx@xx.com,如:
<input type="email" name="eml" form="fo" required="required">
url:自带网址验证功能,格式为http://xxx.com,如:
<input type="url" name="urls" form="fo">
data:设置日期,点击后有日期可选择,如:
<input type="date" name="dates" form="fo">
time:设置时间,如:
<input type="time" name="names" form="fo">
color:设置颜色,自带RGB颜色可供选择,如:
<input type="color" id="colors" form="fo" onchange="change()">
range:实现滚动条,可设置最大值max,最小值min,以及步长step,初始值value,如:
<input type="range" name="range" max="10" min="0" step="1" value="2">
search:实现搜索功能,可实现站内搜索,自带搜索条,如:
<input type="search" name="search" results="s">
number:实现自动选择数值功能,可设置max值,min值,如:
<input type="number" name="score" form="fo" max="100" min="0">
HTML5中的表单写法简化了更灵活了:
HTML4中要提交的必须写在<form></form>
中,HTML5中元素可提交到指定表单,其中属性form的值必须与标签form的id值一致,属性required表示其值不能为空,如下:
<form action="" method="post" id="fo"></form>
请输入帐号:<input type="text" name="te" form="fo" required="required"><br>
请选择颜色:<input type="color" id="colors" form="fo" onchange="change()"><br>