Method and device for implementing input box using multi-terminal development framework

Abstract

The present invention discloses a method and device for implementing an input box using a multi-terminal development framework, and relates to the field of computer technology. A specific implementation of the method includes: creating a view component using a multi-terminal development framework, and creating an input display view in the view component; for each input display view, adding a text component for displaying input content and a simulated cursor for displaying input position in the input display view; creating an input box component for each input display view, monitoring changes in the input box component, and obtaining the input content of each input position according to the changes; displaying the input content in the input display view through the text component to implement the input box. This implementation can achieve the effect of a multi-terminal development input box through a set of codes by combining an input box with a view under the support of a multi-terminal development framework. Users only need to set relevant attribute information without paying attention to the specific implementation scheme. The scheme is flexible, changeable, simple and easy to use.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for implementing an input box using a multi-terminal development framework. Background Art

[0002] With the diversification of client forms, multi-terminal development is now popular, including Web, React Native, mini-programs, etc. When the business requires the same effect to be displayed on different terminals, such as using the radio button function on both the Web and mini-program terminals, it is very convenient to implement it through a set of code.

[0003] Nowadays, when designing mobile pages, the design of input boxes is often not satisfied with the default input box format. In many scenarios such as entering passwords, entering express delivery codes, and entering mobile phone numbers, they are often designed in a horizontal continuous grid or discontinuous grid style to guide users to input.

[0004] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art:

[0005] Most existing technologies use JavaScript to develop input boxes, but they can only meet the unilateral effects of H5 or mini programs and cannot achieve multi-end effects at the same time. Summary of the invention

[0006] In view of this, an embodiment of the present invention provides a method and device for implementing an input box using a multi-terminal development framework. With the support of the multi-terminal development framework, the effect of a multi-terminal development input box can be achieved through a set of codes by combining the input box with the view. The user only needs to set the relevant attribute information without paying attention to the specific implementation plan. The plan is flexible, changeable, simple and easy to use.

[0007] To achieve the above objective, according to one aspect of an embodiment of the present invention, a method for implementing an input box using a multi-terminal development framework is provided.

[0008] A method for implementing an input box using a multi-terminal development framework, comprising:

[0009] Create a view component using a multi-terminal development framework, and create an input display view in the view component;

[0010] For each input display view, a text component for displaying input content and a simulated cursor for displaying an input position are added to the input display view;

[0011] Create an input box component for each input display view, monitor changes of the input box component, and obtain input content of each input position according to the changes;

[0012] The input content is displayed in the input display view through the text component to implement an input box.

[0013] Optionally, after creating the input display view in the view component, the method further includes:

[0014] The style attributes of the input display view and the method for obtaining the display content of the input display view are set.

[0015] Optionally, if the input display view is a grid view, setting the style attribute of the input display view includes:

[0016] The rounded border attributes of the input display view are set, where the rounded border attributes include the border style, border width, and rounded arc of the input display view.

[0017] Optionally, after adding a text component for displaying input content in the input display view, the method further includes:

[0018] Add text attributes to the text component, the text attributes include the font, color and text type of the text, and the text type includes text, numbers, passwords and codes.

[0019] Optionally, after adding a simulated cursor for displaying the input position in the input display view, the method further includes:

[0020] The font size and color attributes of the simulated cursor are set to be the same as those of the text.

[0021] Optionally, the simulated cursor is implemented by adding animation attributes to a page content presentation style file.

[0022] Optionally, after creating the input box component for each input display view, also include:

[0023] A focus attribute and a display attribute are set for the input box component, wherein the display attribute includes the width and height of the input box component, and the focus attribute is used to determine whether a keyboard key is popped up.

[0024] According to another aspect of an embodiment of the present invention, a device for implementing an input box using a multi-terminal development framework is provided.

[0025] A device for implementing an input box using a multi-terminal development framework, comprising:

[0026] A view component creation module, used to create a view component using a multi-terminal development framework, and to create an input display view in the view component;

[0027] A text cursor adding module, used for adding a text component for displaying input content and a simulated cursor for displaying input position in each input display view;

[0028] An input box component creation module is used to create an input box component for each input display view, monitor changes in the input box component, and obtain input content of each input position according to the changes;

[0029] The input content display module is used to display the input content in the input display view through the text component to realize an input box.

[0030] Optionally, the device further comprises a property setting module, configured to:

[0031] After creating the input display view in the view component, the style attribute of the input display view and the method for obtaining the display content of the input display view are set.

[0032] Optionally, if the input display view is a grid view, the property setting module is further used to:

[0033] The rounded border attributes of the input display view are set, where the rounded border attributes include the border style, border width, and rounded arc of the input display view.

[0034] Optionally, the property setting module is further used to:

[0035] After adding a text component for displaying input content in the input display view, text attributes are added to the text component, the text attributes include the font, color and text type of the text, and the text type includes text, numbers, passwords and codes.

[0036] Optionally, the property setting module is further used to:

[0037] After adding a simulated cursor for displaying the input position in the input display view, the font size and color attributes of the simulated cursor are set to be the same as those of the text.

[0038] Optionally, the simulated cursor is implemented by adding animation attributes to a page content presentation style file.

[0039] Optionally, the property setting module is further used to:

[0040] After creating an input box component for each input display view, a focus attribute and a display attribute are set for the input box component, the display attribute includes the width and height of the input box component, and the focus attribute is used to determine whether a keyboard key is popped up.

[0041] According to another aspect of an embodiment of the present invention, an electronic device is provided that implements an input box using a multi-terminal development framework.

[0042] An electronic device that uses a multi-terminal development framework to implement an input box, comprising: 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 for implementing an input box using a multi-terminal development framework provided by an embodiment of the present invention.

[0043] According to still another aspect of the embodiments of the present invention, a computer readable medium is provided.

[0044] A computer-readable medium stores a computer program, which, when executed by a processor, implements a method for implementing an input box using a multi-terminal development framework provided by an embodiment of the present invention.

[0045] An embodiment of the above invention has the following advantages or beneficial effects: by using a multi-terminal development framework to create a view component, and creating an input display view in the view component; for each input display view, adding a text component for displaying input content and a simulated cursor for displaying the input position in the input display view; creating an input box component for each input display view, monitoring changes in the input box component, and obtaining the input content of each input position according to the changes; displaying the input content in the input display view through the text component to realize the input box. With the support of the multi-terminal development framework, the effect of the multi-terminal development input box can be realized through a set of codes by combining the input box with the view. The user only needs to set the relevant attribute information without paying attention to the specific implementation plan. The plan is flexible, changeable and simple to use.

[0046] 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

[0047] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0048] Figure 1 is a schematic diagram of the main steps of a method for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention;

[0049] Figure 2 It is a schematic diagram of a specific process of implementing an input box according to an embodiment of the present invention;

[0050] Figure 3 1 is a schematic diagram of the implementation process of a grid-type input box implemented by multiple terminals in an embodiment of the present invention;

[0051] Figure 4is a schematic diagram of the input effect of the grid-type input box in an embodiment of the present invention;

[0052] Figure 5 is a schematic diagram of main modules of a device for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention;

[0053] Figure 6 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0054] Figure 7 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

[0055] 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.

[0056] Figure 1 1 is a schematic diagram of the main steps of a method for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention. Figure 1 As shown, the method for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention mainly includes the following steps S101 to S104.

[0057] Step S101: Use a multi-terminal development framework to create a view component, and create an input display view in the view component. In an embodiment of the present invention, the multi-terminal development framework is, for example, the Taro framework. Similarly, it can also be other multi-terminal fusion development frameworks that follow the React syntax. In the specific implementation process, it can be flexibly selected according to needs. The multi-terminal development framework can be used to implement the input box on the H5 (HTML5, a language description method for building Web content) page and the mini program at the same time. In the introduction to the embodiment of the present invention, the multi-terminal development framework takes the Taro framework as an example.

[0058] According to an embodiment of the present invention, when creating a view component using a multi-terminal development framework, the multi-terminal development framework can be used to first create a view View component, which is a view container and can be used as the outermost layer of the entire custom input box component to wrap the input box style. Afterwards, an input display view is created in the view component, and the input display view is used to display the input content.

[0059] According to one embodiment of the present invention, after creating an input display view in a view component, the style attributes of the input display view and the method for obtaining the display content of the input display view may also be set. In one embodiment, if the input display view is a grid-type view, setting the style attributes of the input display view specifically includes: setting the rounded border attributes of the input display view, and the rounded border attributes include the border style, border width, and rounded arc of the input display view. In a specific implementation, the input display view may also be other types of views, such as a horizontal line view, and setting the style attributes of the input display view includes, for example, setting the width of the horizontal line, etc.

[0060] Step S102: For each input display view, a text component for displaying input content and a simulated cursor for displaying an input position are added to the input display view.

[0061] According to an embodiment of the present invention, after adding a text component for displaying input content in the input display view, text attributes may be added to the text component, and the text attributes include the font, color, and text type of the text, and the text type includes text, numbers, passwords, etc. Furthermore, after adding a simulated cursor for displaying the input position in the input display view, the font size and color attributes of the simulated cursor may be set to be the same as those of the text.

[0062] In one embodiment of the present invention, the cursor simulation is implemented by adding animation attributes in the page content display style file. The cursor simulation is achieved by adding animation attributes in the less file (page content display style file), and the code is, for example: animation: blink 1s infinite steps (1, start), @keyframes blink {0%, 100% {background-color: red; color: red;} 50% {background-color: white; color: white;}}, which means: create a blinking cursor with an interval of 1 second, and the cursor display state is red and white blinking.

[0063] Step S103: Create an input box component for each input display view, monitor changes in the input box component, and obtain input content at each input position according to the changes.

[0064] According to one of the embodiments of the present invention, after creating an input box component for each input display view, it also includes: setting focus attributes and display attributes for the input box component, the display attributes include the width and height of the input box component, and the focus attribute is used to determine whether the keyboard button pops up. The user can set the focus attribute according to the needs, and can use the focus to determine whether the keyboard case pops up. The user can use the default attributes of the component or overwrite the input box style to perform input operations normally through the keyboard. Focus is the focus attribute. For example, the focus attribute will be triggered when the component is clicked. The user can set the desired effect when clicking the component in the focus method. Focus can be a custom method inside, which can realize user-customized operations such as whether to pop up the keyboard. In general, there will be multiple input boxes, and they are not continuous. Taking the grid input box as an example, various grid input boxes contain unconnected grid styles. If the default style is used, you only need to set the width and height of the grid.

[0065] Step S104: Display the input content in the input display view through a text component to implement an input box.

[0066] When the user inputs characters such as numbers through the keyboard, the input box component will be monitored to change. The content entered by the user is obtained through the input box Input component. The input value is intercepted by position in the input box component, and the intercepted value is set to the text Text component of the corresponding view component View. When the value is empty, the first Text will be filled with a simulated cursor by default. Following the change in the length of the input content, the Text at different positions will choose whether to fill in the input content or the simulated cursor. When the input reaches the maximum length, the component will complete the callback, and the user can perform subsequent operations according to the callback content. In an embodiment of the present invention, the height and width of the input box component are both set to 0. By setting the width and height of the Input component to 0, there will be no interference from the cursor and border of the ordinary input box on the page. The callback here means that when the user completes the maximum input of the content, the system will tell the user that the content has reached the maximum value and tell the user the value filled in. At this time, the user can use the obtained filled content for subsequent operations, such as when the user knows that the input content has reached 6 digits, the page can be jumped.

[0067] According to the above steps S101 to S104, a simple and convenient input box effect can be achieved by combining a custom style with the basic component Input of the multi-terminal development framework Taro, and integrating web attributes and mini-program attributes. This meets the requirement that when developing using a multi-terminal development framework, the same input box effect can be achieved on both the H5 page and the mini-program at the same time, and the input box content is flexible and changeable, and is not limited to digital content.

[0068] Figure 2 1 is a schematic diagram of a specific process of implementing an input box in an embodiment of the present invention. It shows a specific implementation scheme of a dual-end personalized grid input box using the Taro multi-end development framework. Figure 2 As shown, it mainly includes the following steps:

[0069] The first step is to use Taro to create a view component and use the view component as the outermost view container;

[0070] The second step is to loop and create an input display view. In this embodiment, the input display view is, for example, a grid view, and set how to obtain the input content, and also set whether the style of the grid view is continuous, etc.;

[0071] The third step is to add rounded border attributes to the grid view. For example, by setting "border-style: solid" to set the border style to a full rounded border, "border-radius: 10px" to set the border to a 10px rounded radius, and "border-width: 2px" to set the border width to 2px.

[0072] Step 4: Add a Text component to display the input content. The input content comes from the content entered in the Input input box component below.

[0073] Step 5: Add Text component properties, such as displaying numbers or password codes;

[0074] Step 6: Add a simulated cursor to the View component created in the loop to simulate the cursor effect of a normal input box;

[0075] Step 7: Set the font size, color and other properties of the simulated cursor to be the same as those of the Text text;

[0076] Step 8. Create an Input box component in the View component;

[0077] Step 9. Add the focus and value attributes to the Input input box component. The focus can be used to determine whether the keyboard key is lifted, and the value is the content entered by the user.

[0078] Step 10. Set the width and height of the Input input box component to 0px so that the default style of the Input component will not be displayed on the interface;

[0079] In the eleventh step, set the onInput callback method for the Input component to monitor the value changes in the Input component in real time. In this way, the content entered by the user can be displayed in the grid view through the Text component, thus realizing a personalized input box.

[0080] Figure 3 1 is a schematic diagram of the implementation process of the grid-type input box implemented on multiple terminals in an embodiment of the present invention. It shows the specific process of implementing a personalized grid input box on H5 and mini programs using the Taro multi-terminal development framework. Figure 3 , mainly including the following steps:

[0081] The first step is to use the Taro multi-terminal development framework to write a custom input component CustomInput component. The specific implementation process is as follows Figure 2 As shown. According to an embodiment of the present invention, the custom input component CustomInput component includes a view View component, a text Text component, and an input box Input component. The corresponding style attributes of the View, Text, and Input components are set for the CustomInput component. The parameters include the custom grid's width, height, borderStyle, borderWidth, borderColor, cursorColor, textType, textValue, maxValue, focus and other attributes. Among them, Width: grid width, height: grid height, borderStyle border type, borderSidth border width, borderColor border color, cursorColor cursor color, textType input box type (for example: number or code), textValue input box content, maxValue maximum number of inputs, focus sets the focus attribute;

[0082] The second step is to install the custom style component in the multi-terminal development framework Taro through npm install. After the installation is successful, on the page where the input box needs to be generated, the custom input box component is introduced by importing the label radio button component CustomInput component in the custom style component. The specific import method is, for example: import{CustomInput}from'@xxx / xx-taro-xxx'.

[0083] The third step is to add the required location in the render(){} method (page rendering method, used to display the content on the page) <custominput / >Components, users can set the focus attribute according to their needs, and can use focus to determine whether to pop up the keyboard key. Users can use the keyboard to input normally after using the default attributes of the component or overwriting the grid input box style;

[0084] In the fourth step, when the user inputs numbers and other characters through the keyboard, the input content is actually obtained through the Input component. The component intercepts the input value in a loop by position and sets the intercepted value to the Text component of the corresponding View. When the value is empty, the first Text will be filled with a simulated cursor by default. As the length of the input content changes, the Text at different positions will choose to fill in the input content or the simulated cursor. When the input reaches the maximum length, the component will complete the callback, and the user can perform subsequent operations based on the callback content. Because the width and height of the Input component are set to 0, there will be no interference from the cursor and border of the ordinary input box on the page. The cursor simulation is achieved by adding animation attributes in the less file (a dynamic style language used to write the style of content display on the page), for example: animation:blink 1s infinite steps(1,start), @keyframes blink{0%,100%{background-color:red;color:red;}50%{background-color:white;color:white;}}, which means the target effect is to create a blinking cursor with an interval of 1 second, and the display state is red and white blinking;

[0085] In the fifth step, after starting the H5 preview and the mini-program preview through the Taro framework, you can observe the effects of using the grid input box respectively. The input box can input numbers, passwords, text, etc. according to the different type values ​​set.

[0086] The scheme introduced in the above embodiments can realize the input box conveniently and quickly under the Taro framework, and users can use it directly, and can make customized changes according to the needs of the input box to be realized. Specifically, when the user needs to generate a grid-type input box, if the user needs to customize the style attributes of the input box, the number of grids required, the input value range, the type of input data, the font style and cursor style of the input data, etc. can be set. After that, the required grid-type input box can be automatically generated, and the user does not need to pay attention to the program implementation, which is simple and convenient.

[0087] Figure 4It is a schematic diagram of the input effect of the grid-type input box of an embodiment of the present invention, which shows the expected effect display of the grid-type input box. When no content has been entered, the cursor is displayed in the first grid; when part of the content has been entered, the cursor will change position with the position of the input content; when the input is completed, the cursor will disappear. Moreover, the input effect on the H5 page is the same as that on the mini program side. Through the technical solution of the present application, it is implemented by combining Input and View. With the support of the multi-terminal development framework, the customized input box component of the present invention can realize the input box effect at both ends at the same time. The user only needs to set the corresponding properties and does not need to worry about the implementation plan. It is simple and easy to use.

[0088] Figure 5 1 is a schematic diagram of the main modules of a device for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention. Figure 5 As shown, the device 500 for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention mainly includes a view component creation module 501 , a text cursor adding module 502 , an input box component creation module 503 and an input content display module 504 .

[0089] A view component creation module 501 is used to create a view component using a multi-terminal development framework, and to create an input display view in the view component;

[0090] A text cursor adding module 502, configured to add, for each input display view, a text component for displaying input content and a simulated cursor for displaying an input position in the input display view;

[0091] An input box component creation module 503 is used to create an input box component for each input display view, monitor changes of the input box component, and obtain input content of each input position according to the changes;

[0092] The input content display module 504 is used to display the input content in the input display view through the text component to realize an input box.

[0093] According to one embodiment of the present invention, the device 500 for implementing an input box using a multi-terminal development framework further includes a property setting module (not shown in the figure) for:

[0094] After creating the input display view in the view component, the style attribute of the input display view and the method for obtaining the display content of the input display view are set.

[0095] According to another embodiment of the present invention, if the input display view is a grid view, the property setting module (not shown in the figure) may also be used to:

[0096] The rounded border attributes of the input display view are set, where the rounded border attributes include the border style, border width, and rounded arc of the input display view.

[0097] According to yet another embodiment of the present invention, the attribute setting module (not shown in the figure) may also be used for:

[0098] After adding a text component for displaying input content in the input display view, text attributes are added to the text component, the text attributes include the font, color and text type of the text, and the text type includes text, numbers, passwords and codes.

[0099] According to yet another embodiment of the present invention, the attribute setting module (not shown in the figure) may also be used for:

[0100] After adding a simulated cursor for displaying the input position in the input display view, the font size and color attributes of the simulated cursor are set to be the same as those of the text.

[0101] According to yet another embodiment of the present invention, the simulated cursor is implemented by adding animation attributes to a page content presentation style file.

[0102] According to yet another embodiment of the present invention, the attribute setting module (not shown in the figure) may also be used for:

[0103] After creating an input box component for each input display view, a focus attribute and a display attribute are set for the input box component, the display attribute includes the width and height of the input box component, and the focus attribute is used to determine whether a keyboard key is popped up.

[0104] According to the technical solution of the embodiment of the present invention, a view component is created by using a multi-terminal development framework, and an input display view is created in the view component; for each input display view, a text component for displaying input content and a simulated cursor for displaying input position are added to the input display view; an input box component is created for each input display view, changes of the input box component are monitored, and input content of each input position is obtained according to the changes; the input content is displayed in the input display view through the text component to realize the input box. With the support of the multi-terminal development framework, the effect of the multi-terminal development input box can be realized through a set of codes by combining the input box with the view. The user only needs to set the relevant attribute information without paying attention to the specific implementation scheme. The scheme is flexible, changeable, simple and easy to use.

[0105] Figure 6 An exemplary system architecture 600 is shown to which a method for implementing an input box using a multi-terminal development framework or an apparatus for implementing an input box using a multi-terminal development framework according to an embodiment of the present invention can be applied.

[0106] like Figure 6 As shown, system architecture 600 may include terminal devices 601, 602, 603, network 604 and server 605. Network 604 is used to provide a medium for communication links between terminal devices 601, 602, 603 and server 605. Network 604 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0107] Users can use terminal devices 601, 602, and 603 to interact with server 605 through network 604 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 601, 602, and 603, such as web browser applications, small program applications, instant messaging tools, email clients, social platform software, etc. (only examples).

[0108] The terminal devices 601 , 602 , and 603 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, etc.

[0109] Server 605 may be a server that provides various services, such as a background management server that provides support for input box development requests sent by users using terminal devices 601, 602, and 603 (only as an example). The background management server may use a multi-terminal development framework to create a view component for the received input box development request and other data, and create an input display view in the view component; for each input display view, add a text component for displaying input content and a simulated cursor for displaying input position in the input display view; create an input box component for each input display view, monitor changes in the input box component, and obtain input content for each input position according to the changes; display the input content in the input display view through the text component to implement the input box, and feed back the processing result (such as the developed input box - only as an example) to the terminal device.

[0110] It should be noted that the method for implementing an input box using a multi-terminal development framework provided in the embodiment of the present invention is generally executed by the server 605 , and accordingly, the device for implementing an input box using a multi-terminal development framework is generally set in the server 605 .

[0111] It should be understood that Figure 6 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 implementation requirements.

[0112] Reference below Figure 7 , which shows a schematic diagram of the structure of a computer system 700 of a terminal device or a server suitable for implementing an embodiment of the present invention. Figure 7The 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.

[0113] like Figure 7 As shown, the computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 702 or a program loaded from a storage part 708 into a random access memory (RAM) 703. In the RAM 703, various programs and data required for the operation of the system 700 are also stored. The CPU 701, the ROM 702, and the RAM 703 are connected to each other via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0114] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, a mouse, etc.; an output section 707 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 708 including a hard disk, etc.; and a communication section 709 including a network interface card such as a LAN card, a modem, etc. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. A removable medium 711, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 710 as needed, so that a computer program read therefrom is installed into the storage section 708 as needed.

[0115] 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 709, and / or installed from the removable medium 711. When the computer program is executed by the central processing unit (CPU) 701, the above-mentioned functions defined in the system of the present invention are executed.

[0116] 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.

[0117] 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.

[0118] 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 a view component creation module, a text cursor adding module, an input box component creation module, and an input content display module. The names of these units or modules do not, in some cases, constitute limitations on the units or modules themselves. For example, the view component creation module may also be described as "a module for creating a view component using a multi-terminal development framework, and creating an input display view in the view component."

[0119] 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 without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes: creating a view component using a multi-terminal development framework, and creating an input display view in the view component; for each input display view, adding a text component for displaying input content and a simulated cursor for displaying input position in the input display view; creating an input box component for each input display view, monitoring changes in the input box component, and obtaining input content of each input position according to the changes; displaying the input content in the input display view through the text component to realize the input box.

[0120] According to the technical solution of the embodiment of the present invention, a view component is created by using a multi-terminal development framework, and an input display view is created in the view component; for each input display view, a text component for displaying input content and a simulated cursor for displaying input position are added to the input display view; an input box component is created for each input display view, changes of the input box component are monitored, and input content of each input position is obtained according to the changes; the input content is displayed in the input display view through the text component to realize the input box. With the support of the multi-terminal development framework, the effect of the multi-terminal development input box can be realized through a set of codes by combining the input box with the view. The user only needs to set the relevant attribute information without paying attention to the specific implementation scheme. The scheme is flexible, changeable, simple and easy to use.

[0121] 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 implementing an input box using a multi-terminal development framework, characterized in that: include: Using a multi-terminal development framework to create a view component, and creating an input display view in the view component; For each input display view, a text component for displaying input content and a simulated cursor for displaying input position are added to the input display view, and the simulated cursor is implemented by adding animation attributes to the page content display style file; Create an input box component for each input display view, monitor changes of the input box component, and obtain input content of each input position according to the changes; The input content is displayed in the input display view through the text component to implement an input box.

2. The method according to claim 1, characterized in that After creating the input display view in the view component, it also includes: The style attributes of the input display view and the method for obtaining the display content of the input display view are set.

3. The method according to claim 2, characterized in that If the input display view is a grid view, setting the style attributes of the input display view includes: The rounded border attributes of the input display view are set, where the rounded border attributes include the border style, border width, and rounded arc of the input display view.

4. The method according to claim 1, characterized in that After adding a text component for displaying input content in the input display view, the method further includes: Add text attributes to the text component, the text attributes include the font, color and text type of the text, and the text type includes text, numbers, passwords and codes.

5. The method according to claim 1, characterized in that After adding a simulated cursor for displaying the input position in the input display view, the method further includes: The font size and color attributes of the simulated cursor are set to be the same as those of the text.

6. The method according to claim 1, characterized in that After creating the input box component for each input display view, also include: A focus attribute and a display attribute are set for the input box component, wherein the display attribute includes the width and height of the input box component, and the focus attribute is used to determine whether a keyboard key is popped up.

7. A device for implementing an input box using a multi-terminal development framework, characterized in that: include: A view component creation module, used to create a view component using a multi-terminal development framework, and to create an input display view in the view component; A text cursor adding module is used to add a text component for displaying input content and a simulated cursor for displaying input position in each input display view, wherein the simulated cursor is implemented by adding animation attributes in the page content display style file; An input box component creation module is used to create an input box component for each input display view, monitor changes in the input box component, and obtain input content of each input position according to the changes; The input content display module is used to display the input content in the input display view through the text component to realize an input box.

8. An electronic device that uses a multi-terminal development framework to implement an input box, 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 6.

9. 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 6 is implemented.

Images