Method and device for mobile terminal character input
By obtaining the document object model and using inline element labels to render the character input box, listening to click events to determine the input position, the problem of inflexible character input and poor interactive experience in the existing technology is solved, and flexible customization and intermediate insertion of characters is achieved Function, improving the experience of character input on mobile.
Patent Information
- Application Number
- CN202210881461.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-07-26
- Publication Date
- 2025-01-14
- Estimated Expiration
- 2042-07-26
AI Technical Summary
When the existing mobile character input box is implemented using H5 technology, the input box style of the scheme 1 does not support customization, resulting in inflexible character input. Scheme 2 only supports input at the end of the character, which has poor interactive experience.
By obtaining the document object model of the page to be displayed, a character input box is generated based on custom label rendering, each character is rendered separately using the inline element label, and the click event is monitored, and the input position is determined based on the user's click position and character coordinate interval. , realize the movement of the cursor for character input.
It realizes flexible customization of character input boxes, supports users to insert characters in the middle of characters, improves the interactive experience, and ensures that character input is convenient and there are no interactive blind spots.
Smart Images

Figure CN115328324B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a method and device for inputting characters on a mobile terminal. Background Art
[0002] When the mobile character input box is implemented using native technology (iso or android), different controls can be selected according to the terminal type, but because different operating systems need to be developed independently and need to be adapted to many models, the implementation is cumbersome. At present, most people use h5 (HTML5, Hypertext 5.0) technology, which is mobile web technology, to develop mobile character input boxes to realize character input. At present, there are two solutions to use h5 technology to realize character input. The first solution is to use the input tag of html technology with the native input keyboard of the mobile terminal to realize the character input box for character input; the second solution is to use a custom tag to render the input box style, and then use a custom character keyboard to simulate the user input process, bind the user's input content to the value of the input box, and achieve the purpose of simulating character input and display.
[0003] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art:
[0004] Solution 1 does not support customization of the input box style and the native input keyboard, so character input is not flexible enough. Although Solution 2 supports custom settings, it does not support users to enter characters in the middle of a string of characters by inserting them. It only supports character input at the end of the characters, which makes character input inconvenient and the interactive experience is not good enough. Summary of the invention
[0005] In view of this, an embodiment of the present invention provides a method and device for character input on a mobile terminal, which can ensure the flexibility of the character input box, have no interactive dead angles, support users to input characters in an intermediate insertion manner, facilitate character input, and provide a good interactive experience.
[0006] To achieve the above object, according to one aspect of an embodiment of the present invention, a method for inputting characters on a mobile terminal is provided, comprising:
[0007] Obtaining a document object model of a page to be displayed, and rendering and generating a character input box based on a custom tag in the document object model;
[0008] Use an inline element tag to render each character of the string in the character input box separately;
[0009] Listen for click events of each rendered character;
[0010] In response to monitoring a click event of a character, determining the user's input position according to the user's click position and the coordinate interval of the character;
[0011] Move the cursor to the input position to input characters.
[0012] Optionally, each character of the string in the character input box is rendered separately using an inline element tag, including: converting the string in the character input box into an array; traversing each character in the array, and rendering each character into an independent inline element tag.
[0013] Optionally, determining the user's input position based on the user's click position and the coordinate interval of the character includes: respectively obtaining the horizontal coordinate of the user's click position and the coordinate interval of the horizontal coordinate of the character; and determining the user's input position based on the horizontal coordinate of the click position and the coordinate interval of the horizontal coordinate of the character.
[0014] Optionally, the user's input position is determined based on the coordinate interval of the horizontal coordinate of the click position and the horizontal coordinate of the character, including: obtaining the middle coordinate of the horizontal coordinate of the character based on the coordinate interval of the horizontal coordinate of the character; comparing the horizontal coordinate of the click position with the middle coordinate of the horizontal coordinate of the character, if the horizontal coordinate of the click position is smaller than the middle coordinate of the horizontal coordinate of the character, the user's input position is between the character and the previous character of the character; otherwise, the user's input position is between the character and the next character of the character.
[0015] According to another aspect of an embodiment of the present invention, a device for inputting characters on a mobile terminal is provided, comprising:
[0016] An input box generation module is used to obtain a document object model of a page to be displayed, and to render and generate a character input box based on a custom tag in the document object model;
[0017] A character rendering module, used to render each character of the string in the character input box individually using an inline element tag;
[0018] The event monitoring module is used to monitor the click events of each character after rendering;
[0019] A position determination module, for determining the user's input position according to the user's click position and the coordinate interval of the character in response to monitoring a click event of the character;
[0020] The character input module is used to move the cursor to the input position to input characters.
[0021] Optionally, the character rendering module is further used to: convert the character string in the character input box into an array; traverse each character in the array, and render each character into an independent inline element tag.
[0022] Optionally, the position determination module is further used to: respectively obtain the horizontal coordinate of the user's click position and the coordinate interval of the horizontal coordinate of the character; and determine the user's input position according to the horizontal coordinate of the click position and the coordinate interval of the horizontal coordinate of the character.
[0023] Optionally, the position determination module is also used to: obtain the middle coordinate of the horizontal coordinate of the character according to the coordinate interval of the horizontal coordinate of the character; compare the horizontal coordinate of the click position with the middle coordinate of the horizontal coordinate of the character, if the horizontal coordinate of the click position is smaller than the middle coordinate of the horizontal coordinate of the character, the user's input position is between the character and the previous character of the character; otherwise, the user's input position is between the character and the next character of the character.
[0024] According to another aspect of an embodiment of the present invention, there is provided an electronic device for mobile character input, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method for mobile character input provided by an embodiment of the present invention.
[0025] According to another aspect of the embodiments of the present invention, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the method for mobile terminal character input provided by the embodiments of the present invention is implemented.
[0026] An embodiment of the above invention has the following advantages or beneficial effects: by obtaining the document object model of the page to be displayed, a character input box is generated based on the custom tag rendering in the document object model; using inline element tags, each character of the string in the character input box is rendered separately; the click event of each rendered character is monitored; in response to the click event of the character being monitored, the user's input position is determined according to the user's click position and the coordinate range of the character; the technical scheme of moving the cursor to the input position for character input enables the character input box to support flexible customization on the one hand, and can simulate any input scenario, thereby ensuring the flexibility of the character input box; on the other hand, there is no interactive dead angle, and users are supported to input characters in the middle insertion mode, which makes character input convenient and provides a good interactive experience.
[0027] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS
[0028] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.
[0029] Figure 1 is a schematic diagram of the main steps of a method for inputting characters on a mobile terminal according to an embodiment of the present invention;
[0030] Figure 2 This is a schematic diagram of a string rendering effect according to an embodiment of the present invention;
[0031] Figure 3 Schematic diagram of the input position determination principle of an embodiment of the present invention;
[0032] Figure 4 is a schematic diagram of input positions according to an embodiment of the present invention;
[0033] Figure 5 It is a schematic diagram of the implementation process of character input on a mobile terminal according to an embodiment of the present invention;
[0034] Figure 6 is a schematic diagram of main modules of a device for character input on a mobile terminal according to an embodiment of the present invention;
[0035] Figure 7 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;
[0036] Figure 8 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION
[0037] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.
[0038] In order to solve the technical problems existing in the prior art, the present invention provides a method and device for mobile terminal character input, so that the character input box developed based on h5 technology supports flexible customization on the one hand and can simulate any input scenario, and on the other hand, has no interactive dead angles, allowing users to input characters in an inserting manner, so that character input is convenient and the interactive experience is good.
[0039] Figure 1 Schematic diagram of the main steps of the method for inputting characters on a mobile terminal according to an embodiment of the present invention. Figure 1As shown, the method for mobile terminal character input according to an embodiment of the present invention mainly includes the following steps S101 to S105.
[0040] Step S101: Obtain the document object model of the page to be displayed, and render and generate a character input box based on the custom tags in the document object model. In an embodiment of the present invention, in order to support a flexible and custom character input box, a character input box is developed based on the h5 technology. Specifically, the document object model DOM model of the page to be displayed must first be obtained, and then the character input box must be rendered and generated based on the custom tags in the document object model DOM model, wherein the custom tags are, for example, a custom character input keyboard. In an embodiment of the present invention, characters include, for example, uppercase English characters, lowercase English characters, numbers, special characters, and the like.
[0041] Step S102: Use inline element tags to render each character of the string in the character input box separately. Inline elements are elements that only occupy the width and height of their own content by default. Their height or width cannot be changed. The width and height can only be changed after being converted into block-level elements. Inline element tags refer to the tags corresponding to inline elements. The height, width, line height, and top and bottom margins cannot be set directly. The width and height of the tags are completely supported by the content. There can be multiple inline element tags in a row. Inline element tags include, for example, span tags, a tags, em tags, strong tags, b tags, i tags, u tags, label tags, br tags, and the like. By using inline tags to render characters, multiple characters in a row can be rendered separately.
[0042] According to an embodiment of the present invention, each character of the string in the character input box is rendered separately using an inline element tag, which may specifically include: converting the string in the character input box into an array; traversing each character in the array, and rendering each character into an independent inline element tag. In the embodiment of the present invention, the string takes a numeric string as an example, and the numeric string includes numeric characters and a decimal point symbol. Therefore, when rendering each character in the numeric string separately, each numeric character and decimal point symbol in the numeric string is rendered separately as a character. Figure 2 FIG. 1 is a schematic diagram of a string rendering effect according to an embodiment of the present invention. Figure 2 As shown, it shows the effect of rendering each character in the digital string "323232.33" in the character input box separately. Among them, the part without characters input in the character input box can be rendered as a separate character position.
[0043] Step S103: monitor the click event of each character after rendering. In the embodiment of the present invention, each character corresponds to a DOM object in the HTML5 page frame. By monitoring the touchstart event of the DOM object of each character, the click event of each character after rendering can be monitored. The approximate position of the character input by the user can be preliminarily determined through the user's click event.
[0044] Step S104: In response to monitoring the click event of the character, the user's input position is determined according to the user's click position and the coordinate interval of the character. By monitoring the user's click event, it is possible to determine which character the user currently clicks (taking a numeric string as an example, the characters here include numeric characters and decimal points). Afterwards, it is necessary to further calculate whether the input position of the user's click intention is before or after the current digit. Among them, if the character position clicked by the user is a part of the character input box where no characters have been entered, the cursor can be directly inserted in the character position to enter the character.
[0045] According to an embodiment of the present invention, when determining the user's input position based on the user's click position and the coordinate interval of the character, it can specifically include: respectively obtaining the horizontal coordinate of the user's click position and the coordinate interval of the horizontal coordinate of the character; determining the user's input position based on the horizontal coordinate of the click position and the coordinate interval of the horizontal coordinate of the character. Since the height information of the in-line elements does not need to be considered, the user's input position can be determined only by comparing the horizontal coordinates. Specifically, the user's input position can be determined by comparing the horizontal coordinate of the user's click position and the horizontal coordinate interval of the character.
[0046] In an embodiment of the present invention, determining the user's input position according to the coordinate interval of the horizontal coordinate of the click position and the horizontal coordinate of the character may specifically include: obtaining the middle coordinate of the horizontal coordinate of the character according to the coordinate interval of the horizontal coordinate of the character; comparing the horizontal coordinate of the click position with the middle coordinate of the horizontal coordinate of the character, if the horizontal coordinate of the click position is less than the middle coordinate of the horizontal coordinate of the character, the user's input position is between the character and the previous character of the character; otherwise, the user's input position is between the character and the next character of the character. By obtaining the horizontal coordinate interval of the character clicked by the user, the width of the character clicked by the user and the center coordinate of the character, that is, the middle coordinate of the horizontal coordinate of the character, can be obtained. Then, by comparing the horizontal coordinate of the user's click position with the middle coordinate of the horizontal coordinate of the character, it can be determined whether the user's click position is in the left half or the right half of the character. If the horizontal coordinate of the user's click position is less than the middle coordinate of the horizontal coordinate of the character, it means that the user's click position is in the left half of the character, and the user's input position is determined to be before the character, otherwise, the user's input position is determined to be after the character. Specifically, when obtaining the horizontal coordinate of the user's click position, it can be obtained through the page8 attribute returned by the touchstart event. The horizontal coordinate of the character clicked by the user, that is, the horizontal coordinate of the DOM object of the clicked character, can be obtained by recursively adding the horizontal coordinate of the parent object of the currently clicked DOM object, where the root coordinate is the horizontal coordinate of the HTML object.
[0047] Figure 3 FIG. 1 is a schematic diagram of the input position determination principle of an embodiment of the present invention. Figure 3 As shown, assuming that the click event monitored is a click event in which the user clicks on the numeric character 2, the horizontal coordinate of the user's click position can be compared with the middle coordinate of the horizontal coordinate of the numeric character 2 to determine whether the user's expected input position is in front of or behind the numeric character 2.
[0048] Figure 4 FIG. 1 is a schematic diagram of input positions according to an embodiment of the present invention. Figure 4 As shown, the positions between each character can be numbered, and the position after the last character is numbered as a whole input position. Specifically, if the user's input position is between two 3s after the decimal point, the user's input position is position 4 in the figure.
[0049] Step S105: Move the cursor to the input position to input characters. After obtaining the input position expected by the user, the cursor can be moved to the corresponding position and the input interaction operation can be started.
[0050] Figure 5 FIG. 1 is a schematic diagram of a mobile terminal character input implementation process according to an embodiment of the present invention. Figure 5 As shown, in an embodiment of the present invention, taking a numeric string as an example, when a user inputs characters on a mobile terminal, the specific interaction process is as follows:
[0051] 1. The user clicks a character in the character input box, including numeric characters and decimal points;
[0052] 2. Determine the character clicked by the user by monitoring the character click event;
[0053] 3. If there is no character at the position where the user clicks, insert the cursor directly at the position where the user clicks;
[0054] 4. If there is a character at the user click position, determine whether the user click position is in the front half or the back half of the character based on the user click position and the horizontal coordinate interval of the character clicked by the user;
[0055] 5. If the user clicks on the first half of the character, insert the cursor before the character;
[0056] 6. If the user clicks on the second half of the character, the cursor is inserted after the character;
[0057] 7. Receive user input.
[0058] Figure 6 Schematic diagram of the main modules of the device for character input on a mobile terminal according to an embodiment of the present invention. Figure 6 As shown, the mobile terminal character input device 600 of the embodiment of the present invention mainly includes an input box generation module 601, a character rendering module 602, an event monitoring module 603, a position determination module 604 and a character input module 605.
[0059] An input box generation module 601 is used to obtain a document object model of a page to be displayed, and to generate a character input box based on a custom tag rendering in the document object model;
[0060] A character rendering module 602, used to render each character of the string in the character input box separately using an inline element tag;
[0061] An event monitoring module 603 is used to monitor the click event of each rendered character;
[0062] A position determination module 604 is used to determine the user's input position according to the user's click position and the coordinate interval of the character in response to monitoring the click event of the character;
[0063] The character input module 605 is used to move the cursor to the input position to input characters.
[0064] According to an embodiment of the present invention, the character rendering module 602 may also be used to: convert the character string in the character input box into an array; traverse each character in the array, and render each character into an independent inline element tag.
[0065] According to another embodiment of the present invention, the position determination module 604 can also be used to: respectively obtain the horizontal coordinate of the user's click position and the coordinate interval of the horizontal coordinate of the character; determine the user's input position according to the horizontal coordinate of the click position and the coordinate interval of the horizontal coordinate of the character.
[0066] According to another embodiment of the present invention, the position determination module 604 can also be used to: obtain the middle coordinate of the horizontal coordinate of the character according to the coordinate interval of the horizontal coordinate of the character; compare the horizontal coordinate of the click position with the middle coordinate of the horizontal coordinate of the character, if the horizontal coordinate of the click position is smaller than the middle coordinate of the horizontal coordinate of the character, the user's input position is between the character and the previous character of the character; otherwise, the user's input position is between the character and the next character of the character.
[0067] According to the technical solution of the embodiment of the present invention, by obtaining the document object model of the page to be displayed, a character input box is generated based on the custom tag rendering in the document object model; using the inline element tag, each character of the string in the character input box is rendered separately; the click event of each rendered character is monitored; in response to the monitored click event of the character, the user's input position is determined according to the user's click position and the coordinate range of the character; the technical solution of moving the cursor to the input position for character input enables the character input box to support flexible customization on the one hand, and can simulate any input scenario, thereby ensuring the flexibility of the character input box; on the other hand, there is no interactive dead angle, and the user is supported to input characters in the middle insertion mode, which makes character input convenient and provides a good interactive experience.
[0068] Figure 7 An exemplary system architecture 700 is shown to which the method for mobile terminal character input or the apparatus for mobile terminal character input according to the embodiments of the present invention can be applied.
[0069] like Figure 7 As shown, system architecture 700 may include terminal devices 701, 702, 703, network 704 and server 705. Network 704 is used to provide a medium for communication links between terminal devices 701, 702, 703 and server 705. Network 704 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.
[0070] Users can use terminal devices 701, 702, and 703 to interact with server 705 through network 704 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 701, 702, and 703, such as shopping applications, web browser applications, payment applications, instant messaging tools, social platform software, etc. (only as examples).
[0071] The terminal devices 701 , 702 , and 703 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.
[0072] Server 705 may be a server that provides various services, such as a background management server (only an example) that supports shopping websites browsed by users using terminal devices 701, 702, and 703. The background management server may obtain the document object model of the page to be displayed based on the received character input request and other data, render and generate a character input box based on the custom tag in the document object model; use the inline element tag to render each character of the string in the character input box separately; monitor the click event of each rendered character; in response to the monitored character click event, determine the user's input position according to the user's click position and the coordinate range of the character; move the cursor to the input position to perform character input and other processing, and feed back the processing result (such as the character input result - only an example) to the terminal device.
[0073] It should be noted that the method for mobile terminal character input provided in the embodiment of the present invention is generally executed by the server 705 , and accordingly, the device for mobile terminal character input is generally arranged in the server 705 .
[0074] It should be understood that Figure 7 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to the implementation requirements.
[0075] Reference below Figure 8 , which shows a schematic diagram of the structure of a computer system 800 of a terminal device or server suitable for implementing an embodiment of the present invention. Figure 8 The terminal device or server shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.
[0076] like Figure 8As shown, the computer system 800 includes a central processing unit (CPU) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage part 808 into a random access memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the system 800 are also stored. The CPU 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.
[0077] The following components are connected to the I / O interface 805: an input section 806 including a keyboard, a mouse, etc.; an output section 807 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN card, a modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to the I / O interface 805 as needed. A removable medium 811, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 810 as needed, so that a computer program read therefrom is installed into the storage section 808 as needed.
[0078] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 809, and / or installed from the removable medium 811. When the computer program is executed by the central processing unit (CPU) 801, the above-mentioned functions defined in the system of the present invention are executed.
[0079] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.
[0080] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0081] The units or modules involved in the embodiments of the present invention may be implemented in software or hardware. The units or modules described may also be provided in a processor. For example, they may be described as follows: a processor includes an input box generation module, a character rendering module, an event monitoring module, a position determination module, and a character input module. Among them, the names of these units or modules do not constitute limitations on the units or modules themselves in certain circumstances. For example, the character rendering module may also be described as a "module in which a user uses an inline element tag to render each character of a string in a character input box individually."
[0082] As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiment; or it may exist independently and not be assembled into the device. The above computer-readable medium carries one or more programs. When the above one or more programs are executed by a device, the device includes: obtaining the document object model of the page to be displayed, rendering and generating a character input box based on the custom tag in the document object model; using inline element tags to render each character of the string in the character input box separately; monitoring the click event of each rendered character; in response to monitoring the click event of the character, determining the user's input position according to the user's click position and the coordinate interval of the character; moving the cursor to the input position to input the character.
[0083] According to the technical solution of the embodiment of the present invention, by obtaining the document object model of the page to be displayed, a character input box is generated based on the custom tag rendering in the document object model; using the inline element tag, each character of the string in the character input box is rendered separately; the click event of each rendered character is monitored; in response to the monitored click event of the character, the user's input position is determined according to the user's click position and the coordinate range of the character; the technical solution of moving the cursor to the input position for character input enables the character input box to support flexible customization on the one hand, and can simulate any input scenario, thereby ensuring the flexibility of the character input box; on the other hand, there is no interactive dead angle, and the user is supported to input characters in the middle insertion mode, which makes character input convenient and provides a good interactive experience.
[0084] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.
Claims
1. A method for inputting characters on a mobile terminal, characterized in that: include: Obtaining a document object model of a page to be displayed, and rendering and generating a character input box based on a custom tag in the document object model; Use an inline element tag to render each character of the string in the character input box separately; Listen for click events of each rendered character; In response to monitoring a click event of a character, determining the user's input position according to the user's click position and the coordinate interval of the character; Move the cursor to the input position to input characters; Using an inline element tag, each character of the string in the character input box is rendered separately, including: converting the string in the character input box into an array; traversing each character in the array, and rendering each character into an independent inline element tag.
2. The method according to claim 1, characterized in that: Determining the user's input position according to the user's click position and the coordinate interval of the character includes: Respectively obtain the coordinate interval of the horizontal coordinate of the user's click position and the horizontal coordinate of the character; The user's input position is determined according to the horizontal coordinate of the click position and the coordinate range of the horizontal coordinate of the character.
3. The method according to claim 2, characterized in that Determining the user's input position according to the horizontal coordinate of the click position and the coordinate interval of the horizontal coordinate of the character includes: Obtaining the middle coordinate of the horizontal coordinate of the character according to the coordinate interval of the horizontal coordinate of the character; Compare the horizontal coordinate of the click position with the middle coordinate of the horizontal coordinate of the character. If the horizontal coordinate of the click position is smaller than the middle coordinate of the horizontal coordinate of the character, the user's input position is between the character and the previous character of the character; otherwise, the user's input position is between the character and the next character of the character.
4. A device for inputting characters on a mobile terminal, characterized in that: include: An input box generation module is used to obtain a document object model of a page to be displayed, and to render and generate a character input box based on a custom tag in the document object model; A character rendering module, used to render each character of the string in the character input box individually using an inline element tag; The event monitoring module is used to monitor the click events of each character after rendering; A position determination module, for determining the user's input position according to the user's click position and the coordinate interval of the character in response to monitoring a click event of the character; A character input module, used for moving the cursor to the input position to input characters; The character rendering module is also used to: convert the character string in the character input box into an array; traverse each character in the array, and render each character into an independent inline element tag.
5. The device according to claim 4, characterized in that The location determination module is also used for: Respectively obtain the coordinate interval of the horizontal coordinate of the user's click position and the horizontal coordinate of the character; The user's input position is determined according to the horizontal coordinate of the click position and the coordinate range of the horizontal coordinate of the character.
6. The device according to claim 5, characterized in that The location determination module is also used for: Obtaining the middle coordinate of the horizontal coordinate of the character according to the coordinate interval of the horizontal coordinate of the character; Compare the horizontal coordinate of the click position with the middle coordinate of the horizontal coordinate of the character. If the horizontal coordinate of the click position is smaller than the middle coordinate of the horizontal coordinate of the character, the user's input position is between the character and the previous character of the character; otherwise, the user's input position is between the character and the next character of the character.
7. An electronic device for mobile terminal character input, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 3.
8. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 3 is implemented.
Citation Information
Patent Citations
Rich Browser-Based Word Processor
US20110252304A1
Method for inserting characters in a character string and the corresponding digital service
US20170249293A1