HTML5规范引入了许多新的input输入框类型

在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单

本文中,实测手机为肾4S与米4

 

数字类型number

定义input类型为type="number"时,iOS显示数字、标点及符号键盘,Android显示拨号键盘。代码如下所示

<input type="number"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

电话号码类型tel

定义input类型为type="tel"时,iOS与Android都显示拨号键盘。代码如下所示

<input type="tel"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

电子邮件类型email

定义input类型为type="email"时,iOS与Android都显示字母及电子邮件符号键盘。代码如下所示

<input type="email"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

链接类型url

定义input类型为type="url"时,iOS与Android都显示字母及链接符号键盘。代码如下所示

<input type="url"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

日期类型date

定义input类型为type="date"时,iOS与Android都显示日期拾取器,风格差异很大。代码如下所示

<input type="date"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

时间类型time

定义input类型为type="time"时,iOS与Android都显示时间拾取器,风格差异很大。代码如下所示

<input type="time"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

日期时间类型datetime

定义input类型为type="datetime"时,iOS调用失败,Android依次显示日期时间拾取器。代码如下所示

<input type="datetime"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

月份类型month

定义input类型为type="month"时,iOS显示月份拾取器,Android显示日期拾取器但是只记录年份与月份。代码如下所示

<input type="month"  />

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型HTML5移动开发中的input输入框类型

 

iOS键盘布局基本一致,Android不同手机键盘布局会有不小的出入

相关文章:

  • 2021-12-02
  • 2022-02-26
  • 2022-01-18
  • 2021-11-18
  • 2021-06-27
  • 2022-03-08
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-11-09
  • 2021-07-08
  • 2022-12-23
  • 2022-12-23
  • 2021-06-16
相关资源
相似解决方案