h5表单元素（传统+新特性）

h5表单元素

PC表单事件 && 移动端表单事件

  • [x] PC : click、change、keydown、keyup、blur（失去焦点）

  • [x] 移动端 : 一般没有keydown、keyup（移动端使用的键盘是虚拟键盘）
    input ( 移动端多的一个 )

1
2
3
4
5
6
7
8
9
10
11
12
<input type="number" id="number" value="0" disabled>//disabled用户不能操作
<input type="range" id="range" value="0" min="0" max="10" step="1">//滚动条
    
    
var range = document.getElementById("range");
var number = document.getElementById("number");
range.onchange = function() {
    number.value = range.value;
} //松手才触发
range.oninput = function() {
    number.value = range.value;
} //oninput随操作中即触发

传统input表单类型

  • [x] 文本类：text、password

    • password的显示因浏览器而不同

      1
      2
      <input type=""> <!-- 默认text-->
      <input type="password">

  • [x] 按钮类：submit、reset、button

    1
    2
    3
    <input type="button" value="请按下">
    <input type="submit">//提交
    <input type="reset">//重置

  • [x] 单复选框类：radio、checkbox

    • [ ] radio
    • onchange事件：会在域的内容改变时发生
    • checked被选中的

    • label中的for可使得 字体起选择作用

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <input type="radio" name="sex" id="men" value="这是men" checked><label for="men">男</label><!--checked被选中的 -->
      <input type="radio" name="sex" id="women" value="这是women"><label for="women">女</label><!--for可使得字体也可点击 -->
      <input type="submit" id="submit">
      // 表单事件
      	var submit=document.getElementById("submit");
      	var men=document.getElementById("men");
      	var women=document.getElementById("women");
      	submit.onclick=function(){
      		var flag=0;
      		console.log(men.checked?flag=0:1);
      	}
      	// men.onclick=women.onclick=function(){
      	// 	console.log(this.value);
      	// }
      	men.onchange=women.onchange=function(){
      		console.log(this.value);
      	}//表单事件：只有改变才发生

    • [ ] checkbox

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <input type="checkbox" name="eat" id="water" value="水"><label for="water">水</label>
      <input type="checkbox" name="eat" id="apple" value="苹果"><label for="apple">苹果</label>   
      <input type="checkbox" name="eat" id="cherry" value="樱桃"><label for="cherry">樱桃</label>
      <input type="submit" id="submit">
      <input type="button" id="allchecked" value="全选">
      <input type="button" id="invert" value="反选">
       // checkbox
      var submit = document.getElementById("submit");
      var eatList = document.getElementsByName("eat");
      var allchecked = document.getElementById("allchecked");
      var invert= document.getElementById("invert");
      //ie中只对表单元素起作用
      submit.onclick = function() {
          for (var i = 0; i < eatList.length; i++) {
              var curEat = eatList[i];
              if (curEat.checked) {
                  console.log(curEat.value)
              }
          }
      }
      //全选
      allchecked.onclick = function() {
          for (var i = 0; i < eatList.length; i++) {
              var curEat = eatList[i];
              curEat.checked = true;
          }
      }
      //反选
      invert.onclick = function() {
          for (var i = 0; i < eatList.length; i++) {
              var curEat = eatList[i];
              curEat.checked=curEat.checked? false:true;
          }
      }

  • [ ] 上传文件file、当前文本框隐藏hidden

  • 上传文件
    前端：二进制编码–>文件流post发送给服务器
  • 展示文件
    服务器：客户端得到文件流—>解码
    1
    <input type="file">

h5新增加

1、 h5新表单类型

search、url、email、
tel、number、range、color
date、time、dateTime、month、 week

1
2
3
<input type="search" id="searchInp" list="searchList" />//配合dataList
<input id="number" type="number" value="0" disabled>
<input id="range" type="range" value="0" min="0" max="10" step="1">

作用

  • [x] 提高开发效率

  • [x] （h5表单新类型最核心作用）在移动端使用对应input表单类型，当用户输入时可调取对应虚拟键盘

    • 比如email类型则在输入时键盘包含 字符和.@字母数字 （klyy.@163.com）
  • [x] 相对于传统表单提供了新的验证方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type="text" id="tipEmail" style="outline: none" placeholder="增加默认提示信息">
<input type="email" id="inputEmail" style="outline: none">
var tipEmail = document.getElementById("tipEmail");
var inputEmail = document.getElementById("inputEmail");
 // 在原型上扩展方法去除首尾空格
    ~ function(proto) {
        function myTrim() {
            // this-->当前操作字符串
            return this.replace(/^ +| +$/g, '');
        }
        proto.myTrim = myTrim;
    }(String.prototype);
  • [ ] 输入完成后验证：
    • 新类型：JS提供value.checkValidity() 验证格式
    • 传统：onblur+正则验证格式
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      // 新类型email--checkValidity()
          inputEmail.onblur=function(){
              var value=this.value.myTrim();//去除首尾空格--trim()不兼容
              if(!this.checkValidity()){
                  console.log("邮箱格式不正确！")
              }
          }
      ``` 
          ```js 
           // 传统验证方式        
              tipEmail.onblur=function(){
                  var value=this.value.myTrim();//去除首尾空格--trim()不兼容
                  var reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;//验证邮箱格式
                  if(!reg.test(value)){
                      console.log("邮箱格式不正确！")
                  }
              }
  • [ ] 边输入边验证
  • 新类型：css中提供的是input:valid/invald

  • 传统：onkeyup+正则

    1
    2
    3
    4
    5
    6
    7
    8
    //新类型emalil验证
     #inputEmail:valid {
            border: 1px solid green;
        }
    #inputEmail:invalid {
        border: 1px solid red;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //传统验证
     tipEmail.onkeyup = function() {
            var value = this.value.myTrim(); //去除首尾空格--trim()不兼容
            var reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //验证邮箱格式
            if (!reg.test(value)) {
                this.style.border = '1px solid red';
            } else {
                this.style.border = '1px solid green';
            }
        }

新增加属性

  • [x] 还增加常用属性：placeholder，用来给文本框设置默认提示信息的，但不太兼容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="box">
    <span id="tipEmail">请输入您常用的邮箱!</span>
    <input type="email" id="inputEmail" placeholder="请输入您常用的邮箱!" />
</div>
// 处理placeholder的不兼容（IE9以下不兼容）
if (navigator.userAgent.indexOf('MSIE') > -1) {
    var tipEmail = document.getElementById('tipEmail');
    var inputEmail = document.getElementById('inputEmail');
    inputEmail.placeholder = ''; //IE10 placeholder可用，重复了
    tipEmail.style.display = 'block'; //IE下不获取光标时显示字体
    tipEmail.onclick = function() {
        inputEmail.focus();
    };
    inputEmail.onkeydown = inputEmail.onkeyup = inputEmail.onfocus  = function() {
        tipEmail.style.display = this.value.length === 0 ? 'block' : 'none';
    };
}
</script>

新表单元素：

dataList、progress
传统一级下拉菜单（不是文本框）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
 </select>
 
<input type="search" id="searchInp" list="searchList" />
<!-- 二级菜单 -->
<datalist id="searchList">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>