在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等。
个人觉得这些都是我们平时开发很少意识到的,虽然有些刁钻,但都是为了用户体验,为了我们的产品,于是便在网上找了一些资料,在此与各位朋友分享:
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎。 但是这些设备上的浏览体验,有时遗留很多的有待改进。当涉及到填写表单时,这一点尤为明显。幸运的是,HTML5规范引入了许多新input类型,使得在移动设备上,用户更容易填写的你的网页表单。
这是一个相当棒的进展,移动浏览器厂商拿起新的HTML5 input类型,并使用它们来显示定制过的键盘布局,使用户更容易输入数据。
在本文中,你将学到8种已经在HTML5中引入的新input类型。
注意: 本文中,iOS的屏幕截图使用iPhone5和Safari截取。 Android屏幕截图则是在虚拟设备上运行Android4.1和其备有的网页浏览器截取。
电子邮件input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img2.ph.126.net/uQ7MII75VcFhBoAmtd-n0g==/6597399620147184170.png)
IOS(左)和Android(右)的电子邮件input的键盘
email 类型,iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号(.)键。 而在Android上,标准逗号键将出现在空格键的左边,已经被一个@键替换。
<input type="email" name="email">
URL input 类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img2.ph.126.net/VSyvxYpQV9hbBp-x1RcNwA==/3358840897190523473.png)
iOS的URL input键盘
url input 类型可以用来帮助用户输入网址。在iOS上,所有的空格键已被替换成句号(.)键和正斜杠(/)键,以及一个特殊的.com键。
我的测试显示,Android键盘没有变化。
<input type="url" name="url">
电话号码input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img1.ph.126.net/TMCVMIOVEzCdtJByeYRD_g==/2446861972563729202.png)
IOS(左)和Android(右)的电话input的键盘
使用 tel input 类型时,iOS和Android都是提示显示拨号键盘,而不是标准键盘。
<input type="tel" name="tel">
数字input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img0.ph.126.net/pJZiumGDXjSk6fto9A-Pcg==/6630058414024722339.png)
IOS(左)和Android(右)的数字input的键盘
number input 类型促使iOS显示数字和标点符号的键盘。Android浏览器将启动一个类似显示电话输入的键盘。
<input type="number" name="number">
日期input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img2.ph.126.net/O1eJ9m2R58kRB3QinRWH1A==/1436085331278100856.png)
iOS日期拾取器
对于日期和时间,也有许多input类型可用。由于他们保证了你的数据是以一个标准的格式提供,所以这些可以是非常有用的。
在iOS上的 date input 类型会提示显示一个日期选择器。不幸的是,Android浏览器还未支持任何datetime 的input类型。
<input type="date" name="date">
时间input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img2.ph.126.net/jNO6ih0DlBudReFtBidYnQ==/6597964769123607377.png)
iOS时间拾取器
使用time类型时会提示iOS显示一个简单的拾取器来选择小时和分钟。
<input type="time" name="time">
日期和时间input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img2.ph.126.net/E_T6b23fAJO5fhiTKMvIUA==/6597927385728259796.png)
iOS日期时间拾取器
使用datetime类型时将显示一个用于同时选择日期和时间的拾取器。
虽然没有显式的选择年的选项,但是拾取器会自动根据您选择的日期和月份将年添加到你的input。
<input type="datetime" name="datetime">
月份input类型
![使用 HTML5 input 类型提升移动端输入体验(键盘) - Thylx - 火羽王子的博客](http://img2.ph.126.net/u7cC9UmQf9o2Rqsq473vCA==/4853473023522330824.png)
month 类型时将会显示日期选择器的简化版本。
HTML规范还定义了一个week的input类型,然而,在我测试过的浏览器上,这好像并没有实现。
<input type="month" name="month">
HTML5的input类型的浏览器兼容性
不支持这些新input类型的浏览器将只给用户显示一个简单的文本input。 这意味着,你可以继续前进,今天开始使用这些新的输入类型吧!
在桌面浏览器中,能支持日期/时间的input类型的浏览器仍非常有限。Opera浏览器目前有着最好的实现,支持本篇文章中所有提到的类型。谷歌的Chrome浏览器支持 date 类型,但现在没有其他东西。Safari浏览器有日期格式的文本字段,但不支持像Opera和Chrome上显示的那样的日历小组件。
幸运的是,曾经忍受一个差体验的浏览器的日子,在移动端已很快不再。利用HTML5引入的移动端友好的新特性的好处, 对我们所有的用户而言,都肯定能够享受愉快的体验,无论他们是使用哪种设备。
相关推荐
在移动端开发时,HTML5的特性如离线存储(App Cache)、本地存储(Web Storage)以及媒体元素(Audio/Video)等可以提升用户体验。 2. **表单输入类型(Input Types)**: HTML5引入了多种输入类型,其中`type=...
在创建数字键盘软键盘时,HTML5的特性如`<input type="number">`标签可以用来创建只允许输入数字的输入框,同时支持上下箭头进行数值增减,简化了数字输入的实现。 2. 自定义键盘: 在HTML5中,可以通过JavaScript...
总结一下,input事件是我们监听移动端输入的优秀工具,特别是在处理需要实时反馈的场景时,它可以提供比keyup事件更准确、及时的数据。通过合理使用input事件,我们可以实现如字数限制等复杂功能,同时还能保持代码...
jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能来优化网页交互,其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题,帮助开发者理解并掌握相关技术。 首先,我们需要了解...
总的来说,这个"使用jQuery开发的移动端模拟键盘插件特效源码"是一个很好的学习资源,它展示了如何使用jQuery来增强移动端的交互体验。通过深入研究和实践,开发者不仅可以掌握jQuery的使用,还能了解到如何设计和...
本文将深入探讨使用jQuery和HTML5技术构建一个仿支付宝支付虚拟键盘的实现方法,以及如何将这个虚拟键盘集成到移动端项目中。 首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互...
4. **输入反馈**:插件能够实时更新输入框中的内容,提供与真实键盘类似的输入体验。 5. **键盘关闭**:用户完成输入后,可通过预设的关闭按钮或手势来隐藏键盘,节省屏幕空间。 6. **兼容性**:作为基于jQuery的...
总的来说,这个压缩包提供的插件是一种高效、灵活的解决方案,用于在移动端网页中创建自定义模拟键盘,提升用户输入体验。通过调整布局、添加自定义按键和利用jQuery的事件监听,开发者可以打造出满足特定需求的键盘...
2. 表单控件:HTML5新增了许多表单元素,如`<input type="email">`用于邮箱输入,`<input type="tel">`用于电话号码输入,这些元素能自动验证输入格式,减少用户错误,提高登录效率。 3. 交互增强:HTML5的拖放功能...
尽管`jQuery.NumPad`提高了移动端输入体验,但需要注意的是,过多的jQuery操作可能会影响页面性能。为了优化,可以考虑以下几点: - **延迟加载**:如果数字键盘不总是在页面加载时使用,可以考虑在实际需要时动态...
在Vue.js中实现移动端H5数字键盘组件是一个常见的需求,特别是在开发支付或输入数字的场景中。本篇文章将深入解析如何构建这样一个自定义组件,并提供详细的代码示例,以帮助开发者理解和实现自己的数字键盘组件。 ...
- **数据绑定**:使用JavaScript操作DOM元素,将用户输入的数据绑定到对应的表单字段中,例如`document.getElementById('inputName').value`获取姓名输入框的值。 - **表单验证**:在用户提交地址前,需要验证输入...
例如,`<input type="email">`和`<input type="tel">`标签可以帮助用户更方便地输入电子邮件地址和电话号码,同时也能在不同的设备上提供更好的键盘布局。 响应式设计是构建跨平台兼容的网页的关键。通过使用CSS3...
在移动设备上,输入数字和密码的体验往往不如桌面端友好。为了改善这一情况,`jQuery.NumPad`是一个专门设计的数字键盘插件,旨在提供一...它简化了开发过程,提升了用户体验,同时也确保了输入数据的安全性和准确性。
JavaScript实现软键盘输入是一项常见的前端开发任务,尤其在移动设备或者特定应用场景中,为了提高用户输入体验,开发者常会用JavaScript构建虚拟键盘。本项目针对这一需求,提供了一个跨浏览器的解决方案,确保在...
总的来说,自定义手机端页面的数字小键盘涉及HTML、CSS和JavaScript的综合运用,通过这样的方式,我们可以提供更符合业务需求的输入体验,同时提升用户的操作便利性和界面的一致性。在实际开发中,还可以考虑添加更...
为了提高输入体验,可以添加一些特定的JS逻辑。例如,可以限制输入的字符长度,仅允许输入汉字、字母和数字。使用jQuery,可以编写如下代码: ```javascript $(document).ready(function() { $('#plateNumber').on...
在创建时间选择器时,我们通常会使用`<input>`标签,类型为`type="date"`或`type="datetime-local"`,为用户提供一个内置的日期和时间选择器。然而,原生的HTML5日期选择器在不同浏览器和设备上的表现可能不一致,...
在这个场景中,我们主要会用到HTML5的`<input>`元素,尤其是type属性为`tel`或`number`的输入框,用于接收用户输入的数字密码。 JavaScript是实现这个数字键盘的关键,它是一种轻量级的解释型编程语言,常用于网页...
在移动设备上,用户输入数字时,为了提升用户体验,经常需要用到一种输入数字跳格的特效。这个特效使得用户在输入验证码或密码时,每个数字输入后会自动跳转到下一个位置,形成间隔,同时允许留空位数,还支持通过...