Method and device for relocating input box to target position in mobile terminal browser, storage medium

• US 10,318,605 B2
• Filed: 07/03/2014
• Issued: 06/11/2019
• Est. Priority Date: 04/03/2013
• Status: Active Grant

• Current Assignee: Tencent Technology Company Limited (Tencent Holdings Limited)
• Original Assignee: Tencent Technology Company Limited (Tencent Holdings Limited)
• Inventors: Shu, Yuqiang, Ren, Libin
• Primary Examiner(s): Paula, Cesar B
• Assistant Examiner(s): Kulikowski, Konrad J
• Application Number:
  US14/323,193
• Publication Number:
  US 20150007018A1
• Time in Patent Office: 1,804 Days
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/972 Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/0485 Scrolling or panning

Abstract

A method for relocating an input box to a target position in a mobile terminal browser comprises: when a user clicks an input box in a browsed web page and an input method interface pops up, calculating a position of the input box relative to the input method interface and determining whether the input box is partially or completely covered by the input method interface; designating a target position of the input box according to a position of the input method interface, when the input box is partially or completely covered by the input method interface; and rendering the input box at the target position by scrolling the browsed web page and/or canvas. By the invention, when a user clicks an input box and an input method interface pops up, the input box can be relocated and displayed at a reasonable position and be completely visible to the user.

Claims

1. A method for relocating an input box to a target position in a mobile terminal browser, comprising:

calculating, when an input box in a browsed web page is clicked and an input method interface pops up, a position of the input box relative to the input method interface and determining whether the input box is partially or completely covered by the input method interface;

designating a target position of the input box according to a position of the input method interface, when the input box is partially or completely covered by the input method interface; and

rendering the input box at the target position by scrolling one or more content display containers, wherein a first content display container is the browsed web page, and a second content display container is a browsed canvas, the browsed canvas being a visible region displayed on the mobile terminal screen that renders the browsed web page, wherein each content display container is maintained with respective corresponding coordinates, and the browsed web page and the browsed canvas are both scrollable based on the respective corresponding coordinates;

wherein rendering the input box at the target position further comprises;

calculating a distance between a lower edge position of the browsed web page and a lower edge position of a mobile terminal screen as a first distance;

calculating a distance between a lower edge position of the input box at the target position and the lower edge position of the input box at the current position as a second distance;

determining, between the browsed web page and the browsed canvas, which content display container to be scrolled and a corresponding scrolling distance based on the first distance, the second distance, and the respective corresponding coordinates, including;

determining whether the first distance equals to zero;

in response to determining that the first distance is 0, automatically scrolling only the second content display container upward by the second distance;

determining whether the first distance is less than the second distance;

in response to determining that the first distance is larger than or equal to the second distance, automatically scrolling only the first content display container upward by the second distance; and

in response to determining that the first distance is less than the second distance, calculating a difference between the second distance and the first distance as a third distance;

automatically scrolling both the first content display container and the second content display container upward, wherein the browsed webpage is scrolled upward by the first distance, and the browsed canvas is scrolled upward by the third distance.

2. The method of claim 1, wherein, calculating, when an input box in a browsed web page is clicked and an input method interface pops up, the position of the input box relative to the input method interface and determining whether the input box is partially or completely covered by the input method interface comprises:

determining whether the lower edge position of the input box is below an upper edge position of the input method interface, when the input box is clicked and the input method interface pops up from the bottom of a mobile terminal screen; and

if the lower edge position of the input box is below the upper edge position of the input method interface, determining that the input box is partially or completely covered by the input method interface.

3. The method of claim 2, wherein, when the input box is partially or completely covered by the input method interface, designating the target position of the input box according to the position of the input method interface comprises:

designating the target position of the input box in such a way that the lower edge position of the input box coincides with the upper edge position of the input method interface, when the input box is partially or completely covered by the input method interface.

4. The method of claim 1, wherein, calculating, when an input box in a browsed web page is clicked and an input method interface pops up, a position of the input box relative to the input method interface and determining whether the input box is partially or completely covered by the input method interface, comprises:

determining whether the upper edge position of the input box is above the lower edge position of the input method interface when the input box is clicked and the input method interface pops up from the top of the mobile terminal screen; and

if so, determining that the input box is partially or completely covered by the input method interface.

5. The method of claim 4, wherein, designating the target position of the input box according to the position of the input method interface when the input box is partially or completely covered by the input method interface, comprises:

designating the target position of the input box in such a way that the upper edge position of the input box coincides with the lower edge position of the input method interface, when the input box is partially or completely covered by the input method interface.

6. The method of claim 4, wherein, rendering the input box at the target position comprises:

calculating a distance between the upper edge position of the browsed web page and the upper edge position of the mobile terminal screen as a fourth distance;

calculating a distance between the lower edge position of the input box at the target position and the lower edge position of the input box at the current position as a fifth distance; and

rendering the input box at the target position by scrolling at least one of the browsed web page or the browsed canvas according to the fourth distance and the fifth distance.

7. The method of claim 6, wherein, rendering the input box at the target position according to the fourth distance and the fifth distance comprises:

scrolling the browsed canvas downward by the fifth distance when the fourth distance is 0, so that the input box is relocated at the target position;

scrolling the browsed web page downward by the fifth distance when the fourth distance is larger than or equal to the fifth distance, so that the input box is relocated at the target position; and

calculating a difference between the fifth distance and the fourth distance as a sixth distance when the fourth distance is less than the fifth distance, scrolling the browsed web page downward by the fourth distance, and then scrolling the browsed canvas downward by the sixth distance, so that the input box is relocated at the target position.

9. The device of claim 7, wherein, the processor is adapted to:

determine whether the lower edge position of the input box is below the upper edge position of the input method interface, when the input box is clicked and the input method interface pops up from the bottom of a mobile terminal screen; and

if so, determine that the input box is partially or completely covered by the input method interface.

10. The device of claim 9, wherein, the processor is adapted to:

designate the target position of the input box in such a way that the lower edge position of the input box coincides with the upper edge position of the input method interface, when the input box is partially or completely covered by the input method interface.

15. The method of claim 1, wherein calculating the position of the input box relative to the input method interface further comprises:

obtaining coordinates of a corner of a visible region of the browsed web page by calling a system function in a browser control; and

obtaining the lower edge position of the input method interface.

8. A device for relocating an input box to a target position in a mobile terminal browser, comprising:

a memory; and

a processor coupled to the memory;

wherein the processor is configured for;

calculating, when an input box in a browsed web page is clicked and an input method interface pops up, a position of the input box relative to the input method interface and determining whether the input box is partially or completely covered by the input method interface;

designating a target position of the input box according to a position of the input method interface, when the input box is partially or completely covered by the input method interface; and

rendering the input box at the target position by scrolling one or more content display containers, wherein a first content display container is the browsed web page, and a second content display container is a browsed canvas, the browsed canvas being a visible region displayed on the mobile terminal screen that renders the browsed web page, wherein each content display container is maintained with respective corresponding coordinates, and the browsed web page and the browsed canvas are both scrollable based on the respective corresponding coordinates;

wherein the processor is further configured for;

calculating a distance between a lower edge position of the browsed web page and a lower edge position of a mobile terminal screen as a first distance;

calculating a distance between a lower edge position of the input box at the target position and the lower edge position of the input box at the current position as a second distance;

determining, between the browsed web page and the browsed canvas, which content display container to be scrolled and a corresponding scrolling distance based on the first distance, the second distance, and the respective corresponding coordinates, including;

determining whether the first distance equals to zero;

in response to determining that the first distance is 0, automatically scrolling only the second content display container upward by the second distance;

determining whether the first distance is less than the second distance;

in response to determining that the first distance is larger than or equal to the second distance, automatically scrolling only the first content display container upward by the second distance; and

in response to determining that the first distance is less than the second distance, calculating a difference between the second distance and the first distance as a third distance;

automatically scrolling both the first content display container and the second content display container upward, wherein the first content display container is scrolled upward by the first distance, and the second content display container is scrolled upward by the third distance.

11. The device of claim 8, wherein, the processor is adapted to:

determine whether the upper edge position of the input box is above the lower edge position of the input method interface, when the input box is clicked and the input method interface pops up from the top of the mobile terminal screen; and

if so, determine that the input box is partially or completely covered by the input method interface.

12. The device of claim 11, wherein, the processor is adapted to:

designate the target position of the input box in such a way that the upper edge position of the input box coincides with the lower edge position of the input method interface, when the input box is partially or completely covered by the input method interface.

13. The device of claim 11, wherein, the processor is further configured for:

calculating a distance between the upper edge position of the browsed web page and the upper edge position of the mobile terminal screen as a fourth distance;

calculating a distance between the lower edge position of the input box at the target position and the lower edge position of the input box at the current position as a fifth distance; and

rendering the input box at the target position by scrolling the browsed web page and/or canvas according to the fourth distance and the fifth distance.

14. A non-transitory storage medium containing computer-executable instructions, which, when executed by a computer processor, perform a method for relocating an input box to a target position in a mobile terminal browser, wherein the method comprises:

calculating, when an input box in a browsed web page is clicked and an input method interface pops up, a position of the input box relative to the input method interface and determining whether the input box is partially or completely covered by the input method interface;

designating a target position of the input box according to a position of the input method interface, when the input box is partially or completely covered by the input method interface; and

rendering the input box at the target position by scrolling one or more content display containers, wherein a first content display container is the browsed web page, and a second content display container is a browsed canvas, the browsed canvas being a visible region displayed on the mobile terminal screen that renders the browsed web page, wherein each content display container is maintained with respective corresponding coordinates, and the browsed web page and the browsed canvas are both scrollable based on the respective corresponding coordinates;

wherein rendering the input box at the target position further comprises;

calculating a distance between a lower edge position of the browsed web page and a lower edge position of a mobile terminal screen as a first distance;

calculating a distance between a lower edge position of the input box at the target position and the lower edge position of the input box at the current position as a second distance;

determining, between the browsed web page and the browsed canvas, which content display container to be scrolled and a corresponding scrolling distance based on the first distance, the second distance, and the respective corresponding coordinates, including;

determining whether the first distance equals to zero;

in response to determining that the first distance is 0, automatically scrolling only the second content display container upward by the second distance;

determining whether the first distance is less than the second distance;

in response to determining that the first distance is larger than or equal to the second distance, automatically scrolling only the first content display container upward by the second distance; and

in response to determining that the first distance is less than the second distance, calculating a difference between the second distance and the first distance as a third distance;

automatically scrolling both the first content display container and the second content display container upward, wherein the browsed webpage is scrolled upward by the first distance, and the second content display container is scrolled upward by the third distance.