[发明专利]一种基于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的输入控件，所述输入控件的大小和样式与所述输入框的大小和样式一致，且所述输入控件恰好覆盖所述输入框。

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

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

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

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

进一步，还包括：