[發明專利]一種基于HTML5的輸入方法及裝置

有效

• 申請號: 201310264215.X
• 申請日: 2013-06-27
• 公開（公告）號: CN103383629B
• 公開（公告）日: 2017-05-31
• 發明（設計）人: 馮震坤
• 申請（專利權）人: 廣州愛九游信息技術有限公司
• 主分類號: G06F3/0483
• 分類號: G06F3/0483
• 代理公司: 北京市立方律師事務所11330
• 代理人: 王增鑫

技術領域

本發明涉及移動通信技術領域，特別是涉及一種基于HTML5的輸入方法及裝置。

背景技術

HTML5(Hyper Text Markup Language 5th，第五個版本超文本標記語言)里提供了畫布功能，使得網頁瀏覽器可以原生支持更加強大的繪圖功能，但畫布里并沒有提供輸入控件，使得畫布必須調用網頁瀏覽器的輸入控件進行文字或數字等的內容輸入。

現有技術中，一般的做法是上層使用DOM(Document Object Model，文檔對象模型)構建含有輸入控件的界面，來呈現用戶輸入的文字或數字等內容，底層使用畫布進行其它繪圖，然而，由于該輸入控件的界面會遮擋畫布，含有輸入控件的界面和其它用畫布繪制的界面不能很好地結合在一起，因此，該輸入方法會使得兩者之間的層級處理非常復雜，甚至不能實現復雜的交互功能。

發明內容

本發明實施例中提供了一種基于HTML5的輸入方法及裝置，能夠簡化需要處理的層級關系，使得畫布繪圖和輸入控件更好融合。

為了解決上述技術問題，本發明實施例公開了如下技術方案：

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

在第一界面中繪制輸入框；第一界面為HTML5中的畫布界面，該輸入框的繪制通過調用畫布的路徑繪制功能和樣式繪制功能實現；在繪制輸入框后，檢測用戶的點擊位置，判斷用戶的點擊位置是否位于繪制的輸入框內；

當用戶的點擊位置位于所述輸入框內時，創建輸入控件，以使用戶在所述輸入控件中輸入內容；

當所述用戶的點擊位置位于所述輸入框外時，獲得所述用戶在所述輸入控件中輸入的內容；

通過使用畫布的繪制文字功能將所述輸入控件中的輸入內容繪制在所述第一界面的輸入框中；

將輸入內容繪制到輸入框后，移除所述輸入控件。其中，所述創建輸入控件包括：調用JS的創建DOM元素功能，創建一個DOM的輸入控件，所述輸入控件的大小和樣式與所述輸入框的大小和樣式一致，且所述輸入控件恰好覆蓋所述輸入框。

進一步，所述創建輸入控件，包括：

獲得所述輸入框的繪制信息；

按照所述輸入框的繪制信息設置輸入控件的創建信息；

按照所述輸入控件的創建信息創建輸入控件，所述輸入控件的大小和樣式與所述輸入框的大小和樣式一致，且所述輸入控件恰好覆蓋所述輸入框。

進一步，在所述按照所述輸入控件的創建信息創建輸入控件之后，還包括：

將所述輸入控件設置為高亮顯示。

進一步，在所述創建輸入控件之后，還包括：

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

所述將所述輸入控件中的輸入內容繪制在所述第一界面的輸入框中之后，還包括：

移除所述半透明遮擋層。

進一步，所述創建輸入控件具體為：調用JS創建文檔對象模型DOM輸入控件。

第二方面，提供一種基于HTML5的輸入裝置，包括：

繪制單元，用于在第一界面中繪制輸入框；用于通過使用畫布的繪制文字功能將讀取單元讀取的輸入控件中的輸入內容繪制在所述第一界面的輸入框中；第一界面為HTML5中的畫布界面，該輸入框的繪制通過調用畫布的路徑繪制功能和樣式繪制功能實現；

檢測單元，用于檢測用戶的點擊位置是否位于所述輸入框內；

創建單元，用于當所述檢測單元檢測到所述用戶的點擊位置位于所述輸入框內時，創建所述輸入控件，以使用戶在所述輸入控件中輸入內容；

所述讀取單元，用于當所述檢測單元檢測到所述用戶的點擊位置位于所述輸入框外時，獲得所述用戶在所述輸入控件中輸入的內容；

移除單元，用于當所述繪制單元將輸入控件中的輸入內容繪制在所述第一界面的輸入框中后，移除所述輸入控件。其中，所述創建輸入控件包括：調用JS的創建DOM元素功能，創建一個DOM的輸入控件，所述輸入控件的大小和樣式與所述輸入框的大小和樣式一致，且所述輸入控件恰好覆蓋所述輸入框。

進一步，所述創建單元包括：

信息獲取子單元，用于獲得所述輸入框的繪制信息；

信息設置子單元，用于按照所述輸入框的繪制信息設置輸入控件的創建信息；

控件創建子單元，用于按照所述輸入控件的創建信息創建輸入控件，所述輸入控件的大小和樣式與所述輸入框的大小和樣式一致，且所述輸入控件恰好覆蓋所述輸入框。

進一步，還包括：