一种数字输入方法、装置和移动设备与流程

文档序号:14623343发布日期:2018-06-08 03:29阅读:119来源:国知局

本申请涉及移动设备技术领域,更具体地说,涉及一种数字输入方法、装置和移动设备。



背景技术:

在移动设备上,有时候需要以一定的浏览器为基础为用户提供数字输入工具,例如输入转账金额、密码等,目前一般使用传统的input数字输入框接收用户的输入,并将输入的数字传入相应的后台,以使后台根据转账金额、密码等实现相应的操作,如转账、提现等。

然而,随着用户的使用习惯和移动端本身的发展,不同移动设备的浏览器也有很大的区别、例如有的用户会使用搜狗浏览器、谷歌浏览器,有的则会使用百度浏览器、360浏览器等,对于不同的浏览器来说,其渲染机制也会有很大的区别,从而使移动设备因浏览器的不同的无法对input数字输入框进行良好兼容,进而使用户的使用体验较差。



技术实现要素:

有鉴于此,本申请提供一种数字输入方法、装置和移动设备,用于使移动设备上的浏览器能够接收用户输入的数字,以解决传统方案下用户体验较差的问题。

为了实现上述目的,现提出的方案如下:

一种数字输入方法,应用于移动设备,所述数字输入方法具体包括步骤:

响应用户的数字输入请求,在运行于所述移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,所述数字输入界面包括至少一个数字输入框;

接收用户输入的数字,将所述数字传入所述数字输入框,并显示所述数字;

响应用户的输入确认请求,将所述数字传入所述移动设备的后台系统。

可选的,所述数字输入界面还包括模拟键盘。

可选的,还包括步骤:

当用户点击所述模拟键盘上的隐藏键或点击所述数字输入界面的空白处时,隐藏所述模拟键盘。

可选的,所述数字输入框为金额输入框或密码输入框。

可选的,当所述数字输入框为所述密码输入框时,所述模拟键盘上的数字键和/或字母键为随机乱序排列。

所述数字输入界面上在预设位置还显示有快捷输入键和账户余额,可选的,所述数字输入方法还包括步骤:

当用户点击所述快捷输入键时,将与所述账户余额相同的数字传入所述数字输入框。

一种数字输入装置,应用于移动设备,所述数字输入装置具体包括:

显示控制模块,用于响应用户的数字输入请求,在运行于所述移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,所述数字输入界面包括至少一个数字输入框;

第一接收模块,用于接收用户输入的数字,将所述数字传入所述数字输入框,并显示所述数字;

数字上传模块,用于响应用户的输入确认请求,将所述数字传入所述移动设备的后台系统。

可选的,所述数字输入界面还包括模拟键盘。

可选的,还包括:

隐藏控制模块,用于当用户点击所述模拟键盘上的隐藏键或点击所述数字输入界面的空白处时,隐藏所述模拟键盘。

可选的,所述数字输入框为金额输入框或密码输入框。

可选的,当所述数字输入框为所述密码输入框时,所述模拟键盘上的数字键和/或字母键为随机乱序排列。

所述数字输入界面上在预设位置还显示有快捷输入键和账户余额,可选的,所述数字输入装置还包括:

第二接收模块,用于当用户点击所述快捷输入键时,将与所述账户余额相同的数字传入所述数字输入框。

一种移动设备,设置有如上所述的数字输入装置。

从上述的技术方案可以看出,本申请公开了一种数字输入方法、装置和移动设备,该方法和装置应用于移动设备,具体为响应用户的数字输入请求,在运行于移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,数字输入界面包括至少一个数字输入框;接收用户输入的数字,将数字传入数字输入框,并显示数字;响应用户的输入确认请求,将数字传入移动设备的后台系统。由于react前端框架不依赖其他任何的库,因此可以与任何其浏览器的库集成使用,也就能很好地应用于任何的浏览器,从而很好地解决了与浏览器的兼容性问题,进而提高了用户的使用体验。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种数字输入方法的步骤流程图;

图2为本申请实施例提供的一种数字输入界面的效果图;

图3为本申请实施例提供的另一种数字输入界面的效果图;

图4为本申请实施例提供的又一种数字输入界面的效果图;

图5为本申请实施例提供的一种数字输入装置的结构框图;

图6为本申请实施例提供的一种移动设备的结构框图。

具体实施方式

下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。

实施例一

图1为本申请实施例提供的一种数字输入方法的步骤流程图。

如图1所示,本实施例提供的数字输入方法应用于手机、平板电脑等移动设备,用于接收用户输入的数字,如金额、密码等,该数字输入方法具体包括如下步骤:

S101:根据用户的请求显示数字输入界面。

即当用户通过点击运行于移动设备的浏览器的相应区域或按钮输入相应的输入输入请求时,响应该数字输入请求,在该浏览器的显示界面上显示一个数字输入界面,该数字输入界面包括至少一个用于接收用户输入相应数字的数字输入框,如图2所示。

在本实施例的一个具体实施方式中,该显示界面除了显示数字输入框外,还显示模拟键盘,模拟键盘为在显示界面上显示的数字输入区域,用于接收用户的点击输入或者滑动输入,并将用户选中的数字传入到数字输入框中。

在本实施例的另一个具体实施方式中,该模拟键盘并非一直显示在显示界面上,而是在用户点击数字输入框或者显示界面的空白处时,弹出该模拟键盘,如图3所示。

在本实施例的另一个具体实施方式中,在用户在利用该模拟键盘输入数字或密码完毕后,点击该模拟键盘的隐藏键或者显示界面的空白处时,将该模拟键盘隐藏。

值得指出的是,该数字输入界面是基于react前端框架实现的,该界面使用的组件均通过react语法实现,例如,在需要时,通过如下方式将组件引入到页面框架中:

import KeyboardInput from\"KeyboardInput\"

在需要引用的时候,通过下面的方法引入:

<KeyboardInput defaultValut={this.state.defaultValut}

placeholder={this.props.authorizeAmountString}

value={this.state.money_input}changeFn={this.handleChangeInput.bind(this)}/>

其中,defaultValut,placeholder,value,changeFn等属性是根据用户的需求,需要传入的参数。

react前端框架一般被用来作为MVC中的V层,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,包括Jquery、Backbone等。它可以在浏览器端运行,也可以通过nodejs在服务端渲染。

React引入了虚拟DOM的机制,在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。

尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

本实施例中的数字输入框可以为金额输入框或者密码输入框,金额输入框用于供用户输入相应的金额,密码输入框用于供用户输入相应的密码。金额输入框和密码输入框可以同时出现,也可以先后出现,所谓先后出现是在用户输入金额后,在确定金额后将金额输入框隐藏,并显示该密码输入框。

当显示密码输入框时,此时默认显示或者在用户点击该密码输入框或者显示界面的空白处而显示模拟键盘时,该模拟键盘上的数字键和/或字母键以正常的顺序进行排练,或者以随机乱序排列方式进行排列。这里的正常的顺序是指按数字的顺序、如1、2、3....,对于字母键来说,如A、B、C.....。随机乱序则以较为混乱的方式进行排列,即不是以上述的顺序进行排列,这样能够带来较大的安全性,具体如图4所示。

S102:接收用户输入的数字,并将该数字传入数字输入框。

当用户向移动设备内输入相应的数字时,将输入的数字传入到数字输入框,并在该数字输入框内显示输入的数字。

具体的,用户可以通过移动设备的物理键盘进行数字的输入,当然也包括在需要输入密码时输入相应的字母。另外,用户还可以利用上述的模拟键盘输入金额或者密码。

S103:根据用户的输入确认请求将数字传入后台系统。

当用户完成在数字输入框中输入相应的数字,如金额或者密码后,通过利用物理键盘输入或者模拟键盘输入确认信息,则将用户输入的数字传入到相应的后台系统,完成金额的上传或者密码的上传,从而使后台系统可以根据输入的金额,或者金额和密码进行充值、提现等交易。

从上述技术方案中可以看出,本实施例提供了一种数字输入方法,该方法应用于移动设备,具体为响应用户的数字输入请求,在运行于移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,数字输入界面包括至少一个数字输入框;接收用户输入的数字,将数字传入数字输入框,并显示数字;响应用户的输入确认请求,将数字传入移动设备的后台系统。由于react前端框架不依赖其他任何的库,因此可以与任何其浏览器的库集成使用,也就能很好地应用于任何的浏览器,从而很好地解决了与浏览器的兼容性问题,进而提高了用户的使用体验。

另外,在本申请的一个具体实施方式中,在数字输入界面上的预设位置还显示有一个快捷输入键和账户余额,快捷输入键如图4的“全投”键。另外,除去账户余额外还可以显示多个数字。针对上述设置,本具体实施方式还包括步骤:

当用户点击该快捷输入键或在该快捷输入键上滑动时,将与该账户余额相同的数字传入到该数字输入框,并在该数字输入框中显示该数字。通过这样的操作可以使用户快捷地输入一个数字。

实施例二

图5为本申请实施例提供的一种数字输入装置的结构框图图。

如图5所示,本实施例提供的数字输入装置应用于手机、平板电脑等移动设备,用于接收用户输入的数字,如金额、密码等,该数字输入装置具体包括显示控制模块10、第一接收模块20和数字上传模块30。

显示控制模块用于根据用户的请求显示数字输入界面。

即当用户通过点击运行于移动设备的浏览器的相应区域或按钮输入相应的输入输入请求时,响应该数字输入请求,在该浏览器的显示界面上显示一个数字输入界面,该数字输入界面包括至少一个用于接收用户输入相应数字的数字输入框,如图2所示。

在本实施例的一个具体实施方式中,该显示界面除了显示数字输入框外,还显示模拟键盘,模拟键盘为在显示界面上显示的数字输入区域,用于接收用户的点击输入或者滑动输入,并将用户选中的数字传入到数字输入框中。

在本实施例的另一个具体实施方式中,该模拟键盘并非一直显示在显示界面上,而是在用户点击数字输入框或者显示界面的空白处时,弹出该模拟键盘,如图3所示。

在本实施例的另一个具体实施方式中,还包括一个隐藏控制模块,隐藏控制模块用于在用户在利用该模拟键盘输入数字或密码完毕后,点击该模拟键盘的隐藏键或者显示界面的空白处时,将该模拟键盘隐藏。

值得指出的是,该数字输入界面是基于react前端框架实现的,该界面使用的组件均通过react语法实现,例如,在需要时,通过如下方式将组件引入到页面框架中:

import KeyboardInput from\"KeyboardInput\"

在需要引用的时候,通过下面的方法引入:

<KeyboardInput defaultValut={this.state.defaultValut}

placeholder={this.props.authorizeAmountString}

value={this.state.money_input}changeFn={this.handleChangeInput.bind(this)}/>

其中,defaultValut,placeholder,value,changeFn等属性是根据用户的需求,需要传入的参数。

react前端框架一般被用来作为MVC中的V层,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,包括Jquery、Backbone等。它可以在浏览器端运行,也可以通过nodejs在服务端渲染。

React引入了虚拟DOM的机制,在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。

尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

本实施例中的数字输入框可以为金额输入框或者密码输入框,金额输入框用于供用户输入相应的金额,密码输入框用于供用户输入相应的密码。金额输入框和密码输入框可以同时出现,也可以先后出现,所谓先后出现是在用户输入金额后,在确定金额后将金额输入框隐藏,并显示该密码输入框。

当显示密码输入框时,此时默认显示或者在用户点击该密码输入框或者显示界面的空白处而显示模拟键盘时,该模拟键盘上的数字键和/或字母键以正常的顺序进行排练,或者以随机乱序排列方式进行排列。这里的正常的顺序是指按数字的顺序、如1、2、3....,对于字母键来说,如A、B、C.....。随机乱序则以较为混乱的方式进行排列,即不是以上述的顺序进行排列,这样能够带来较大的安全性,具体如图4所示。

第一接收模块用于接收用户输入的数字,并将该数字传入数字输入框。

当用户向移动设备内输入相应的数字时,将输入的数字传入到数字输入框,并在该数字输入框内显示输入的数字。

具体的,用户可以通过移动设备的物理键盘进行数字的输入,当然也包括在需要输入密码时输入相应的字母。另外,用户还可以利用上述的模拟键盘输入金额或者密码。

数字上传模块用于根据用户的输入确认请求将数字传入后台系统。

当用户完成在数字输入框中输入相应的数字,如金额或者密码后,通过利用物理键盘输入或者模拟键盘输入确认信息,则将用户输入的数字传入到相应的后台系统,完成金额的上传或者密码的上传,从而使后台系统可以根据输入的金额,或者金额和密码进行充值、提现等交易。

从上述技术方案中可以看出,本实施例提供了一种数字输入装置,该装置应用于移动设备,具体为响应用户的数字输入请求,在运行于移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,数字输入界面包括至少一个数字输入框;接收用户输入的数字,将数字传入数字输入框,并显示数字;响应用户的输入确认请求,将数字传入移动设备的后台系统。由于react前端框架不依赖其他任何的库,因此可以与任何其浏览器的库集成使用,也就能很好地应用于任何的浏览器,从而很好地解决了与浏览器的兼容性问题,进而提高了用户的使用体验。

另外,在本申请的一个具体实施方式中,在数字输入界面上的预设位置还显示有一个快捷输入键和账户余额。另外,除去账户余额外还可以显示多个数字。针对上述设置,本具体实施方式还包括一个第二接收模块。

第二接收模块用于当用户点击该快捷输入键或在该快捷输入键上滑动时,将与该账户余额相同的数字传入到该数字输入框,并在该数字输入框中显示该数字。通过这样的操作可以使用户快捷地输入一个数字。

实施例三

本实施例提供了一种移动设备,该移动设备设置有如上一实施例所提供的数字输入装置,该数字输入装置具体用于响应用户的数字输入请求,在运行于移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,数字输入界面包括至少一个数字输入框;接收用户输入的数字,将数字传入数字输入框,并显示数字;响应用户的输入确认请求,将数字传入移动设备的后台系统。由于react前端框架不依赖其他任何的库,因此可以与任何其浏览器的库集成使用,也就能很好地应用于任何的浏览器,从而很好地解决了与浏览器的兼容性问题,进而提高了用户的使用体验。

实施例四

图6为本申请实施例提供的一种移动设备的结构框图。

如图6所示,本实施例提供了一种移动设备100,该移动设备至少包括一个处理器101、以及通过数字总线102与该处理器相连接的存储器103,该存储器存储有计算机程序。该计算机程序能够运行于该处理器,在该处理器运行该计算机程序时,能够使移动设备实现下面的操作:

S101:根据用户的请求显示数字输入界面。

即当用户通过点击运行于移动设备的浏览器的相应区域或按钮输入相应的输入输入请求时,响应该数字输入请求,在该浏览器的显示界面上显示一个数字输入界面,该数字输入界面包括至少一个用于接收用户输入相应数字的数字输入框,如图2所示。

在该显示界面除了显示数字输入框外,还显示模拟键盘,模拟键盘为在显示界面上显示的数字输入区域,用于接收用户的点击输入或者滑动输入,并将用户选中的数字传入到数字输入框中。

该模拟键盘并非一直显示在显示界面上,而是在用户点击数字输入框或者显示界面的空白处时,弹出该模拟键盘,如图3所示。

在用户在利用该模拟键盘输入数字或密码完毕后,点击该模拟键盘的隐藏键或者显示界面的空白处时,将该模拟键盘隐藏。

本实施例中的数字输入框可以为金额输入框或者密码输入框,金额输入框用于供用户输入相应的金额,密码输入框用于供用户输入相应的密码。金额输入框和密码输入框可以同时出现,也可以先后出现,所谓先后出现是在用户输入金额后,在确定金额后将金额输入框隐藏,并显示该密码输入框。

当显示密码输入框时,此时默认显示或者在用户点击该密码输入框或者显示界面的空白处而显示模拟键盘时,该模拟键盘上的数字键和/或字母键以正常的顺序进行排练,或者以随机乱序排列方式进行排列。这里的正常的顺序是指按数字的顺序、如1、2、3....,对于字母键来说,如A、B、C.....。随机乱序则以较为混乱的方式进行排列,即不是以上述的顺序进行排列,这样能够带来较大的安全性,具体如图4所示。

S102:接收用户输入的数字,并将该数字传入数字输入框。

当用户向移动设备内输入相应的数字时,将输入的数字传入到数字输入框,并在该数字输入框内显示输入的数字。

具体的,用户可以通过移动设备的物理键盘进行数字的输入,当然也包括在需要输入密码时输入相应的字母。另外,用户还可以利用上述的模拟键盘输入金额或者密码。

S103:根据用户的输入确认请求将数字传入后台系统。

当用户完成在数字输入框中输入相应的数字,如金额或者密码后,通过利用物理键盘输入或者模拟键盘输入确认信息,则将用户输入的数字传入到相应的后台系统,完成金额的上传或者密码的上传,从而使后台系统可以根据输入的金额,或者金额和密码进行充值、提现等交易。

从上述技术方案中可以看出,本实施例提供了一种数字输入方法,该方法应用于移动设备,具体为响应用户的数字输入请求,在运行于移动设备的浏览器的显示界面上,显示一个基于react前端框架的数字输入界面,数字输入界面包括至少一个数字输入框;接收用户输入的数字,将数字传入数字输入框,并显示数字;响应用户的输入确认请求,将数字传入移动设备的后台系统。由于react前端框架不依赖其他任何的库,因此可以与任何其浏览器的库集成使用,也就能很好地应用于任何的浏览器,从而很好地解决了与浏览器的兼容性问题,进而提高了用户的使用体验。

另外,在数字输入界面上的预设位置还显示有一个快捷输入键和账户余额,快捷输入键如图4的“全投”键。另外,除去账户余额外还可以显示多个数字。针对上述设置,本具体实施方式还包括步骤:

当用户点击该快捷输入键或在该快捷输入键上滑动时,将与该账户余额相同的数字传入到该数字输入框,并在该数字输入框中显示该数字。通过这样的操作可以使用户快捷地输入一个数字。

本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白,本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此,本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上,使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例做出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的技术方案进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的一般技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本申请的限制。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1