CN103383629B - 一种基于html5的输入方法及装置 - Google Patents

Abstract

本发明实施例公开了一种基于HTML5的输入方法及装置。一种输入方法，包括：在第一界面中绘制输入框；当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容；当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；将所述输入控件中的输入内容绘制在所述第一界面的输入框中；移除所述输入控件。本发明实施例通过将输入控件中的输入内容绘制在画布的输入框中，然后移除输入控件，从而大大简化了界面间的层级关系，使得在进行文字或数字等的内容输入时，无需处理复杂的层级关系，不仅实现了内容输入，而且可实现复杂的交互功能，提升了用户体验。

Description

一种基于HTML5的输入方法及装置

技术领域

本发明涉及移动通信技术领域，特别是涉及一种基于HTML5的输入方法及装置。

背景技术

HTML5(Hyper Text Markup Language 5th，第五个版本超文本标记语言)里提供了画布功能，使得网页浏览器可以原生支持更加强大的绘图功能，但画布里并没有提供输入控件，使得画布必须调用网页浏览器的输入控件进行文字或数字等的内容输入。

现有技术中，一般的做法是上层使用DOM(Document Object Model，文档对象模型)构建含有输入控件的界面，来呈现用户输入的文字或数字等内容，底层使用画布进行其它绘图，然而，由于该输入控件的界面会遮挡画布，含有输入控件的界面和其它用画布绘制的界面不能很好地结合在一起，因此，该输入方法会使得两者之间的层级处理非常复杂，甚至不能实现复杂的交互功能。

发明内容

本发明实施例中提供了一种基于HTML5的输入方法及装置，能够简化需要处理的层级关系，使得画布绘图和输入控件更好融合。

为了解决上述技术问题，本发明实施例公开了如下技术方案：

第一方面，提供一种基于HTML5的输入方法，包括：

在第一界面中绘制输入框；第一界面为HTML5中的画布界面，该输入框的绘制通过调用画布的路径绘制功能和样式绘制功能实现；在绘制输入框后，检测用户的点击位置，判断用户的点击位置是否位于绘制的输入框内；

当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容；

当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；

通过使用画布的绘制文字功能将所述输入控件中的输入内容绘制在所述第一界面的输入框中；

将输入内容绘制到输入框后，移除所述输入控件。其中，所述创建输入控件包括：调用JS的创建DOM元素功能，创建一个DOM的输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

进一步，所述创建输入控件，包括：

获得所述输入框的绘制信息；

按照所述输入框的绘制信息设置输入控件的创建信息；

按照所述输入控件的创建信息创建输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

进一步，在所述按照所述输入控件的创建信息创建输入控件之后，还包括：

将所述输入控件设置为高亮显示。

进一步，在所述创建输入控件之后，还包括：

生成半透明遮挡层，所述遮挡层用于遮挡所述第一界面；

所述将所述输入控件中的输入内容绘制在所述第一界面的输入框中之后，还包括：

移除所述半透明遮挡层。

进一步，所述创建输入控件具体为：调用JS创建文档对象模型DOM输入控件。

第二方面，提供一种基于HTML5的输入装置，包括：

绘制单元，用于在第一界面中绘制输入框；用于通过使用画布的绘制文字功能将读取单元读取的输入控件中的输入内容绘制在所述第一界面的输入框中；第一界面为HTML5中的画布界面，该输入框的绘制通过调用画布的路径绘制功能和样式绘制功能实现；

检测单元，用于检测用户的点击位置是否位于所述输入框内；

创建单元，用于当所述检测单元检测到所述用户的点击位置位于所述输入框内时，创建所述输入控件，以使用户在所述输入控件中输入内容；

所述读取单元，用于当所述检测单元检测到所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；

移除单元，用于当所述绘制单元将输入控件中的输入内容绘制在所述第一界面的输入框中后，移除所述输入控件。其中，所述创建输入控件包括：调用JS的创建DOM元素功能，创建一个DOM的输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

进一步，所述创建单元包括：

信息获取子单元，用于获得所述输入框的绘制信息；

信息设置子单元，用于按照所述输入框的绘制信息设置输入控件的创建信息；

控件创建子单元，用于按照所述输入控件的创建信息创建输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

进一步，还包括：

显示设置子单元，用于在所述控件创建子单元创建输入控件之后，将所述输入控件设置为高亮显示。

进一步，还包括：

遮挡单元，用于在所述创建单元创建输入控件之后，生成半透明遮挡层，所述遮挡层用于遮挡所述第一界面；

所述移除单元，还用于在绘制单元将所述输入控件中的输入内容绘制在所述第一界面的输入框中之后，移除所述半透明遮挡层。

第三方面，提供一种具有处理器可执行的程序代码的计算机可读介质，在被执行时，所述程序代码使得处理器执行下述步骤：

在第一界面中绘制输入框；

当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容；

当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；

将所述输入控件中的输入内容绘制在所述第一界面的输入框中；

移除所述输入控件。

本发明实施例通过将输入控件中的输入内容绘制在画布的输入框中，然后移除输入控件，从而大大简化了界面间的层级关系，使得在进行文字或数字等的内容输入时，无需处理复杂的层级关系，不仅实现了内容输入，而且可实现复杂的交互功能，提升了用户体验。

附图说明

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

图1为现有技术中在实现输入后拖动画布所产生的效果示意图；

图2为现有技术中在实现输入后画布界面弹出对话框所产生的效果示意图；

图3为本发明实施例一种输入方法的流程图；

图4为本发明实施例中在画布上绘制出输入框的示意图；

图5为本发明实施例中将输入控件中的输入内容会知道画布上的输入框中的示意图；

图6为本发明实施例中创建输入控件的方法流程图；

图7为图6所示实施例中创建的输入控件的示意图；

图8为本发明实施例另一种输入方法的流程图；

图9为图8所示实施例中形成遮挡层的示意图；

图10为本发明实施例中实现输入后拖动画布所产生的效果示意图；

图11为本发明实施例中在实现输入后画布界面弹出对话框所产生的效果示意图；

图12为本发明实施例一种输入装置的结构示意图；

图13为本发明实施例中创建单元的结构示意图。

具体实施方式

现有技术中，在上层使用DOM的输入控件呈现用户的输入内容，下层使用画布进行其他绘图时，由于存在层级关系，不仅输入控件的界面会遮挡画布的界面，影响画布的操作使用，而且，当对下层画布进行操作时，上层的输入控件不会自动相应进行调整，例如图1所示，当下层画布进行滑动时，画布上的输入框会跟着整个界面一起从左到右滑动，然而上层的输入控件则不会滑动，从而出现如图1所示输入控件会超出屏幕的情形。再如图2所示，当画布界面弹出对话框时，由于画布处于下层，输入控件处于上层，此时会形成如图2所示的情形，即上层的输入控件遮挡下层画布上弹出的对话框。

因此，现有技术中，由于含有输入控件的界面和其它用画布绘制的界面不能很好地结合在一起，因此，该输入方法会使得两者之间的层级处理非常复杂，甚至不能实现交互。

基于此，本发明实施例提供了一种基于HTML5的输入方法和装置，通过将输入控件中的输入内容绘制在画布的输入框中，然后移除输入控件，从而大大简化了界面间的层级关系，使得在进行文字或数字等的内容输入时，无需处理复杂的层级关系，不仅实现了内容输入，而且可实现复杂的交互功能，提升了用户体验。

为了使本技术领域的人员更好地理解本发明实施例中的技术方案，并使本发明实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图对本发明实施例中技术方案作进一步详细的说明。

参见图3，为本发明实施例一种输入方法的流程图。

该方法可以包括：

步骤301，在第一界面中绘制输入框。

该第一界面可以是指不具有输入控件或不能实现文字或数字等的内容输入功能的界面，以下该第一界面以HTML5中的画布界面为例进行说明。

在本步骤中，该输入框的绘制可以由输入装置通过调用画布的路径绘制功能和样式绘制功能实现，在画布界面上画出输入框的背景和边框，如图4所示的输入框41。

步骤302，当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容。

在绘制完成输入框后，输入装置检测用户的点击位置，并判断用户的点击位置是否位于上步骤绘制的输入框内(可以包括输入框的边缘)，具体的，可以获得用户点击位置的坐标，然后比较点击位置的坐标与输入框的坐标，判断该点击位置是否位于输入框内。

若点击位置位于该输入框内(可以包括输入框的边缘)，则说明用户将要输入文字或数字等内容，此时立即创建输入控件，以使用户在该输入控件中输入内容。若点击位置位于该输入框外，则说明用户并非要进行输入操作，此时无需创建输入控件。

在创建输入控件时，具体可以是调用JS(JAVASCRIPT，一种网页客户端脚本语言)的创建DOM元素功能，创建一个DOM的输入控件。该输入控件的大小、样式及位置可以根据需要设置，例如可以设置在屏幕的正中位置，以便于引起用户的注意，也可以设置在画布的输入框的上方，覆盖输入框，以使用户认为该输入控件为画布上的输入框。

在创建输入控件后，用户即可在该输入控件中进行输入。

步骤303，当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容。

输入装置检测用户的点击位置，并判断点击位置是否位于输入框外，该过程与前述步骤302中的检测和判断过程类似，此处不再赘述。

当检测到用户的点击位置位于输入框外时，表明用户已经输入完成，此时，该输入装置可以获得输入控件中的输入内容，具体的，可以调用JS读取输入控件的内容，然后执行下一步骤。

步骤304，将所述输入控件中的输入内容绘制在所述第一界面的输入框中。

该输入装置将读取的输入内容通过使用画布的绘制文字功能把输入内容绘制到画布绘制的输入框上，如图5所示。

步骤305，移除所述输入控件。

在将输入内容绘制到输入框后，移除该输入控件，也即移除了输入控件所在的界面，从而在执行画布界面操作时，即可省去了处理画布和DOM输入控件的层级关系。

本发明实施例通过将输入控件中的输入内容绘制在画布的输入框中，然后移除输入控件，从而大大简化了界面间的层级关系，使得在进行文字或数字等的内容输入时，无需处理复杂的层级关系，不仅实现了内容输入，而且可实现复杂的交互功能，提升了用户体验。

在本发明的另一实施例中，如图6所示，创建输入控件的方法可以包括如下步骤：

步骤601，获得所述输入框的绘制信息。

该输入装置首先获取画布中该输入框的绘制信息，该绘制信息可以是以下信息中的一个或多个：该输入框的大小、样式、在画布中的位置。

步骤602，按照所述输入框的绘制信息设置输入控件的创建信息。

该输入装置设置输入控件的创建信息的过程可以是通过JS调用该输入控件的样式修改功能，将该输入控件的大小、样式和位置设置成与画布中的输入框的大小、样式和位置完全一致。

步骤603，按照所述输入控件的创建信息创建输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

根据该输入控件的创建信息即可创建出输入控件，该创建后的输入控件即位于画布绘制的输入框相同的位置上，并且输入控件的大小、样式与输入框的大小、样式完全一致，因此该输入控件可以恰好覆盖该输入框，从而使用户只能看到该输入控件而完全看不到画布的输入框。

优选的，为了向用户突出显示该输入控件，该创建输入控件的方法还可以进一步包括：

步骤604，将所述输入控件设置为高亮显示。

具体的，可以将输入控件的边框改为红色等，以使其高亮显示，如图7所示。

当然，在另一实施例中，无论如何创建该输入控件，无论创建的该输入控件位于什么位置，都可以将创建的输入控件设置为高亮显示。

在本发明的另一实施例中，如图8所示，该输入方法可以包括：

步骤801，在第一界面中绘制输入框。

步骤802，当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容。

步骤801～802与前述实施例中的步骤301～302类似，此处不再赘述。其中，步骤802中创建输入控件的具体过程还可以与前述实施例中的步骤601～604类似。

步骤803，生成半透明遮挡层，所述遮挡层用于遮挡所述第一界面。

在本实施例中，还可以在第一界面上生成一半透明的遮挡层，挡住第一界面，如图9所示，在形成该遮挡层后，屏幕上除输入控件之外，其他区域均变暗，以提示用户当前的焦点在输入控件上。

步骤804，当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容。

步骤805，将所述输入控件中的输入内容绘制在所述第一界面的输入框中。

步骤806，移除所述输入控件，并移除所述半透明遮挡层。

本步骤中除了移除输入控件后，还包括移除前述步骤中生成的遮挡层，以使用户对画布界面进行操作。

在通过上述方法实现输入后，由于输入内容已经绘制在画布的输入框上，因此当画布进行滑动时，输入框及输入框中的内容会随着画布进行滑动如图10所示，而不会出现如图1所示的现有技术的问题；当画布界面弹出对话框时，由于输入控件的界面已经移除，输入框和输入内容位于画布的界面，所以，弹出的对话框上不会再覆盖输入控件，如图11所示，也即不会再出现如图2所示的情形。

本方案有效地把画布绘图和输入控件融合起来，使得所有界面都由画布来绘制，由画布自己管理图层，不用考虑与DOM输入控件的层级关系，大大降低了开发的难度，可以实现更加复杂的交互界面。

以上是对本发明方法实施例的描述，下面对实现上述方法的装置进行介绍。

如图12所示，为本发明实施例一种输入装置的结构示意图。

该输入装置可以包括：

绘制单元1201，用于在第一界面中绘制输入框；将读取单元1204读取的输入控件中的输入内容绘制在所述第一界面的输入框中；

检测单元1202，用于检测用户的点击位置是否位于所述输入框内。

创建单元1203，用于当所述检测单元1202检测到所述用户的点击位置位于所述输入框内时，创建所述输入控件，以使用户在所述输入控件中输入内容。

读取单元1204，用于当所述检测单元1202检测到所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容。

移除单元1205，用于当所述绘制单元1201将输入控件中的输入内容绘制在所述第一界面的输入框中后，移除所述输入控件。

首先，绘制单元1201在第一界面中绘制输入框，检测单元1202检测用户的点击位置是否位于该输入框内，若是，则由创建单元1203创建输入控件，以使用户在该输入控件中进行内容输入，继续由检测单元1202检测用户的点击位置是否位于输入框外，当位于输入框外时，有读取单元1204读取输入控件中的输入内容，并由绘制单元1201将读取的输入内容绘制在第一界面的输入框中，然后由移除单元1205将创建单元1203创建的输入控件移除。

本发明实施例通过上述单元将输入控件中的输入内容绘制在画布的输入框中，然后移除输入控件，从而大大简化了界面间的层级关系，使得在进行文字或数字等的内容输入时，无需处理复杂的层级关系，不仅实现了内容输入，而且可实现复杂的交互功能，提升了用户体验。

在本发明的另一实施例中，如图13所示，该创建单元1203可以进一步包括：

信息获取子单元1301，用于获得所述输入框的绘制信息。

信息设置子单元1302，用于按照所述输入框的绘制信息设置输入控件的创建信息。

控件创建子单元1303，用于按照所述输入控件的创建信息创建输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

除了上述子单元，创建单元1203还可以包括：

显示设置子单元1304，用于在所述控件创建子单元1303创建输入控件之后，将所述输入控件设置为高亮显示。

在本发明的另一实施例中，该输入装置还可以包括：

遮挡单元，用于在所述创建单元创建输入控件之后，生成半透明遮挡层，所述遮挡层用于遮挡所述第一界面。

移除单元除了用于移除输入控件之外，还用于在绘制单元1401将所述输入控件中的输入内容绘制在所述第一界面的输入框中之后，移除所述半透明遮挡层。

本发明实施例还提供了一种具有处理器可执行的程序代码的计算机可读介质，在被执行时，所述程序代码使得处理器执行下述步骤：

在第一界面中绘制输入框；

当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容；

当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；

将所述输入控件中的输入内容绘制在所述第一界面的输入框中；

移除所述输入控件。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (8)

1.一种基于HTML5的输入方法，其特征在于，包括：

在第一界面中绘制输入框；第一界面为HTML5中的画布界面，该输入框的绘制通过调用画布的路径绘制功能和样式绘制功能实现；

在绘制输入框后，检测用户的点击位置，判断用户的点击位置是否位于绘制的输入框内；

当用户的点击位置位于所述输入框内时，创建输入控件，以使用户在所述输入控件中输入内容；

当所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；

通过使用画布的绘制文字功能将所述输入控件中的输入内容绘制在所述第一界面的输入框中；

将输入内容绘制到输入框后，移除所述输入控件；

其中，所述创建输入控件包括：

调用JS的创建DOM元素功能，创建一个DOM的输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

2.根据权利要求1所述的方法，其特征在于，所述创建输入控件，包括：

获得所述输入框的绘制信息；

按照所述输入框的绘制信息设置输入控件的创建信息；

按照所述输入控件的创建信息创建输入控件。

3.根据权利要求2所述的方法，其特征在于，在所述按照所述输入控件的创建信息创建输入控件之后，还包括：

将所述输入控件设置为高亮显示。

4.根据权利要求1至3中任意一项所述的方法，其特征在于，在所述创建输入控件之后，还包括：

生成半透明遮挡层，所述遮挡层用于遮挡所述第一界面；

所述将所述输入控件中的输入内容绘制在所述第一界面的输入框中之后，还包括：

移除所述半透明遮挡层。

5.一种基于HTML5的输入装置，其特征在于，包括：

绘制单元，用于在第一界面中绘制输入框，通过使用画布的绘制文字功能将读取单元读取的输入控件中的输入内容绘制在所述第一界面的输入框中；第一界面为HTML5中的画布界面，该输入框的绘制通过调用画布的路径绘制功能和样式绘制功能实现；

检测单元，用于检测用户的点击位置是否位于所述输入框内；

创建单元，用于当所述检测单元检测到所述用户的点击位置位于所述输入框内时，创建所述输入控件，以使用户在所述输入控件中输入内容；

所述读取单元，用于当所述检测单元检测到所述用户的点击位置位于所述输入框外时，获得所述用户在所述输入控件中输入的内容；

移除单元，用于当所述绘制单元将输入控件中的输入内容绘制在所述第一界面的输入框中后，移除所述输入控件；

其中，所述创建所述输入控件包括：

调用JS的创建DOM元素功能，创建一个DOM的输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

6.根据权利要求5所述的装置，其特征在于，所述创建单元包括：

信息获取子单元，用于获得所述输入框的绘制信息；

信息设置子单元，用于按照所述输入框的绘制信息设置输入控件的创建信息；

控件创建子单元，用于按照所述输入控件的创建信息创建输入控件。

7.根据权利要求6所述的装置，其特征在于，还包括：

显示设置子单元，用于在所述控件创建子单元创建输入控件之后，将所述输入控件设置为高亮显示。

8.根据权利要求5至7中任意一项所述的装置，其特征在于，还包括：

遮挡单元，用于在所述创建单元创建输入控件之后，生成半透明遮挡层，所述遮挡层用于遮挡所述第一界面；

所述移除单元，还用于在绘制单元将所述输入控件中的输入内容绘制在所述第一界面的输入框中之后，移除所述半透明遮挡层。