H5系列之新input

朱雀 2023-08-17 15:23 121阅读 0赞

虽说H5 新填了几个很方便的input 类型，但是吧，想法是美好的，但是现实很残酷，兼容性不太好。基本只有google浏览器能用。但是既然出了，那么就要了解他，知道有这么一个东西就好。

input类型：

color

date

datetime

datetime-local

month

number

range

time

url

week

**color 兼容情况(支持：google，opera)**

允许用户从取色器中选一个颜色

![1609428-20190812163137989-905952735.gif][]

**　　**

**date　　兼容情况(支持：google，opera，safari)**

允许用户从一个日期选择器中选取一个日期

![1609428-20190812163625946-1001307257.gif][]

**datatime　　兼容情况(支持：safari) w3school 里面显示 opera浏览器兼容，但是实测，不行。**

由于没有mac系统，就实验不了了- -

**datetime-local　　兼容情况(支持：google，opera，safari)**

允许用户选择日期和时间

![1609428-20190812165708374-1839124184.gif][]

**email　　兼容情况(支持：ie，google，opera，firefox)**

在提交表单的时候，会验证用户输入的 email格式是否有效

**![1609428-20190812170207711-452664425.gif][]**

**month　　兼容情况(支持：google，opera，safari)**

允许用户选择一个年份和月份没有日期

![1609428-20190812170537536-505061875.gif][]

**number　 兼容情况(支持：ie，google，opera，safari)**

设置文本框只能输入数字，其他字母不允许。

允许添加限定：

<table style="width:566px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;">disabled</td> 
   <td style="text-align:left;">规定输入字段是禁用的</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">max</td> 
   <td style="text-align:left;">规定允许的最大值</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">maxlength</td> 
   <td style="text-align:left;">规定输入字段的最大字符长度</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">min</td> 
   <td style="text-align:left;">规定允许的最小值</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">pattern</td> 
   <td style="text-align:left;">规定用于验证输入字段的模式</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">readonly</td> 
   <td style="text-align:left;">规定输入字段的值无法修改</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">required</td> 
   <td style="text-align:left;">规定输入字段的值是必需的</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">size</td> 
   <td style="text-align:left;">规定输入字段中的可见字符数</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">step</td> 
   <td style="text-align:left;">规定输入字段的合法数字间隔</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">value</td> 
   <td style="text-align:left;"> <p>规定输入字段的默认值</p> </td> 
  </tr> 
 </tbody> 
</table>

![1609428-20190812171036984-1345208624.gif][]

**range　　兼容情况(支持：ie，google，opera，safari)**

这个类型就比较好玩了，会出现一条滑动条

也有一些允许添加的限定：

*  max - 规定允许的最大值
 *  min - 规定允许的最小值
 *  step - 规定合法的数字间隔
 *  value - 规定默认值

**time　　兼容情况(支持：google，opera，safari)**

允许用户输入或定义时间。

![1609428-20190812172654903-1903163947.gif][]

**url　　兼容情况(支持：ie，google，opera，)**

在提交表单的时候，会验证用户输入的 url格式是否有效

![1609428-20190812174150891-1377103496.gif][]

**week　　兼容情况(支持：google，opera，safari)**

允许用户选择年份，第几周

![1609428-20190812183015353-1694917114.gif][]

转载于:https://www.cnblogs.com/yanggeng/p/11341040.html

[1609428-20190812163137989-905952735.gif]: /images/20230810/aeeff4ceab1a4fafb752e4163e11a916.png
[1609428-20190812163625946-1001307257.gif]: /images/20230810/cbf99aa1dd124447b9665b66e7775b6f.png
[1609428-20190812165708374-1839124184.gif]: /images/20230810/327ac93607164e08aaaaad56f96fb5f5.png
[1609428-20190812170207711-452664425.gif]: /images/20230810/4049c53e46084481818fe48de831666a.png
[1609428-20190812170537536-505061875.gif]: /images/20230810/c1f5ede008cc454f9926623b9620a2cf.png
[1609428-20190812171036984-1345208624.gif]: /images/20230810/50188a32d20c48a4b4c6f3a25e798bce.png
[1609428-20190812172654903-1903163947.gif]: /images/20230810/15617658d8ec41a6a09ab76f3e066bda.png
[1609428-20190812174150891-1377103496.gif]: /images/20230810/739f0a59bfdf41a78c9f0df38f9b0413.png
[1609428-20190812183015353-1694917114.gif]: /images/20230810/71a96f07dfa943f2ac386988c067d3dc.png