WO2020006864A1

WO2020006864A1 - Browser input box display method and apparatus, computer device, and storage medium

Info

Publication number: WO2020006864A1
Application number: PCT/CN2018/105417
Authority: WO
Inventors: 王建华
Original assignee: 平安科技（深圳）有限公司
Priority date: 2018-07-06
Filing date: 2018-09-13
Publication date: 2020-01-09
Also published as: CN109190067B; CN109190067A

Abstract

A browser input box display method and apparatus, a computer device, and a storage medium, The present application is used to resolve the issue in which an input box cannot be properly displayed because some browsers do not support a placeholder function. The method comprises: after a browser of a client loads a target item, detecting whether the browser supports a placeholder function (S101); if not, generating, when a request to display an input box on the browser is received, a new input box on a display page of the browser that is required by the target item but does not have the placeholder function (S103); and adding a preset inline element to the position of the new input box, so as to simulate the new input box as an input box component having the placeholder function (S104), wherein the style of the inline element is consistent with that of an input box component generated by using the placeholder function, and the content of the inline element is consistent with placeholder text of the input box component generated by using the placeholder function.

Description

Browser input box display method, device, computer equipment and storage medium

This application is based on a Chinese invention patent application filed on July 06, 2018 with application number 201810735637.3, entitled "Browser Input Box Display Method, Device, Computer Equipment, and Storage Medium", and claims its priority.

Technical field

The present application relates to the technical field of browsers, and in particular, to a method, a device, a computer device, and a storage medium for displaying a browser input box.

Background technique

Browsers used by different clients may be different. For example, some client browsers use the ie (Internet Explorer) kernel, and some client browsers use the Chrome kernel. In addition, there may be differences in kernel versions between the same kernels, such as ie kernel has ie9, ie10, ie11, etc.

At present, when a server is used as a data provider, such as a data provider for a web page, a user uses a client browser to access the server and load data of items on the server. In many cases, an input box, that is, an input tag needs to be loaded. However, there are some browser kernels that cannot support HTML input placeholders, that is, do not support the placeholder function, which causes these client browsers to display styles and placeholder text normally when displaying input boxes. It is inconvenient for users to use and reduces the user experience.

Summary of the invention

Based on this, it is necessary to provide a browser input box display method, device, computer device, and storage medium that can improve the compatibility of a server project with all browser kernel versions in response to the above technical problems.

A browser input box display method includes:

After the client browser loads the target item, detecting whether the browser supports a placeholder function;

If the browser does not support the placeholder function, when receiving a request to display an input box on the browser, the non-placeholder function required to generate the target item on the browser's display page is generated New input box;

Adding a preset inline element on the new input box position to simulate the new input box as an input box component with a placeholder function, wherein the style of the inline element and the use of the placeholder function The generated input box component has the same style, and the content of the elements in the line is consistent with the placeholder text of the input box component generated by using the placeholder function.

A browser input box display device includes:

A function detection module, configured to detect whether the browser supports a placeholder function after the browser of the client loads the target item;

An input box generating module is configured to generate a target item on a display page of a browser when a request for displaying an input box on the browser is received if a detection result of the function detection module is negative. New input box without placeholder function;

In-line element adding module is configured to add a preset in-line element at the position of the new input box, so as to simulate the new input box into an input box component with a placeholder function. The style is consistent with the style of the input box component generated by using the placeholder function, and the content of the elements in the row is consistent with the placeholder text of the input box component generated by using the placeholder function.

A computer device includes a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, and the processor implements the browser input box when the processor executes the computer-readable instructions Demonstrate method steps.

One or more non-volatile readable storage media storing computer readable instructions, the computer readable storage medium storing computer readable instructions, so that the one or more processors execute the above browser input box display Method steps.

Details of one or more embodiments of the present application are set forth in the accompanying drawings and description below, and other features and advantages of the present application will become apparent from the description, the drawings, and the claims.

BRIEF DESCRIPTION OF THE DRAWINGS

In order to explain the technical solutions of the embodiments of the present application more clearly, the drawings used in the description of the embodiments of the application will be briefly introduced below. Obviously, the drawings in the following description are just some embodiments of the application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without paying creative labor.

1 is a schematic diagram of an application environment of a method for displaying a browser input box according to an embodiment of the present application;

2 is a flowchart of a browser input box display method according to an embodiment of the present application;

FIG. 3 is a schematic flowchart of an application scenario step S101 of a browser input box display method according to an embodiment of the present application; FIG.

4 is a schematic diagram of two input boxes on a login interface of a QQ program;

5 is a schematic flowchart of a method for displaying a browser input box in an embodiment of the present application to simulate a placeholder text effect in an application scenario;

6 is a schematic flowchart of a browser input box display method in another application scenario according to an embodiment of the present application;

FIG. 7 is a schematic flowchart of an application scenario step S402 of a browser input box display method according to an embodiment of the present application;

FIG. 8 is a schematic flowchart of a method for displaying a browser input box in an embodiment of the present application in which an historical record of style attributes is stored in an application scenario;

9 is a schematic structural diagram of a browser input box display device according to an embodiment of the present application;

FIG. 10 is a schematic diagram of a computer device according to an embodiment of the present application.

detailed description

In the following, the technical solutions in the embodiments of the present application will be clearly and completely described with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, but not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by a person of ordinary skill in the art without creative efforts shall fall within the protection scope of this application.

The browser input box display method provided in this application can be applied in the application environment shown in FIG. 1, in which a client communicates with a server through a network. Among them, the client may be, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers, and portable wearable devices. The server can be implemented by an independent server or a server cluster composed of multiple servers.

In an embodiment, as shown in FIG. 2, a method for displaying a browser input box is provided. The method is applied to the server in FIG. 1 as an example, and includes the following steps:

S101. After the client browser loads the target item, it is detected whether the browser supports a placeholder function, and if yes, step S102 is performed, and if not, step S103 is performed;

When a user accesses the server using a client's browser and requests to load data of the server's target project, the server can detect the browser after loading the target project to detect whether the browser supports a placeholder function. In particular, in this embodiment, a custom component can be set by using code in the target project in advance. After the custom component is loaded by the browser, it will automatically perform a detection function to detect whether the browser supports a placeholder function. . The custom component can be a piece of code block, which can be implanted into different projects to implement the functions described in this method. In an application scenario, the custom component is developed based on the Vue.js framework (belonging to a front-end js framework) and is applicable to all vue projects. The simple code is: <vue-input-placeholderplaceholder = ”text…”>.

It should be noted that the target item may specifically be webpage content, APP content, etc., which are carried on the server.

Further, as shown in FIG. 3, the step S101 may specifically include:

S201. Create a new input box for testing on the browser;

S202. Determine whether the input box for testing has a placeholder attribute. If yes, go to step S203; if no, go to step S204;

S203. Determine that the browser supports a placeholder function;

S204. Determine that the browser does not support a placeholder function.

For step S201, it can be understood that in order to detect whether the browser supports the placeholder function, you can first try the placeholder function on the browser. If the placeholder function can be used normally, the newly created input box will inevitably bring There are placeholder attributes. Therefore, you can first create a test input box on the browser. It should be known that the newly-created input box for the test is generally established according to the needs of the target project. For example, if the content currently loaded by the target project is the user's login page, the login page needs to be displayed for the user Enter the input boxes for "Account" and "Password". Then, during the test in step S201, a new input box for "Account" and / or "Password" can be created as the input box for testing.

For step S202, it can be understood that if the browser supports the placeholder function, then the newly created test input box must have the placeholder attribute; otherwise, if the browser does not support the placeholder function Yes, then the newly created test input box will not have a placeholder attribute. Therefore, you can determine whether the browser supports the placeholder function by judging whether the newly created test input box has a placeholder attribute.

For step S203, it can be known from the foregoing analysis that if the input box for testing has a placeholder attribute, it can be determined that the browser supports a placeholder function.

For step S204, it can be known from the foregoing analysis that if the input box for testing does not have a placeholder attribute, it is determined that the browser does not support the placeholder function.

S102. When receiving a request to display an input box on the browser, use the placeholder function to generate an input box component on a display page of the browser;

It can be understood that if the server detects that the browser supports the placeholder function, when the input box needs to be displayed on the browser, such as loading a login page, the native placeholder function can be directly used in An input box component is generated on the display page of the browser. The input box component mentioned here may include an input box body, and a placeholder attribute attached to the input box body. The placeholder attribute may include a placeholder text, a placeholder position, a style, and the like.

S103. When receiving a request to display an input box on the browser, generate a new input box without a placeholder function required by the target item on a display page of the browser;

It can be understood that if the server detects that the browser does not support the placeholder function, this means that the placeholder function cannot be used on the browser, or the input box cannot be displayed normally by using the placeholder function. . In order to prevent the user of the client from discerning such a difference and causing a decrease in user experience, in this embodiment, when an input box needs to be displayed on the browser, the non-accounting required for generating the target item on a browser display page New input box for token function.

It should be noted that step 103 should be to generate the new input box without the placeholder function according to the needs of the target project. For example, if the content currently loaded for the target project is a user's login page, the login page needs to display input boxes for the user to enter an "account" and "password". Then, when generating the input boxes in step 103, the user needs to enter A new input box without a placeholder function is generated at the "Account" input position, and another new input box without a placeholder function is generated at the "Password" input position.

S104. Add a preset inline element to the position of the new input box to simulate the new input box into an input box component with a placeholder function, wherein a style and a placeholder of the inline element are used. The style of the input box component generated by the break function is consistent, and the content of the element in the line is consistent with the placeholder text of the input box component generated by the placeholder function.

It can be understood that after generating a new input box without a placeholder function in step 103, in order to make the new input box consistent with the display effect of the input box component generated by using the placeholder function, this embodiment In the new input box position, a preset inline element is added, and the style of the inline element is consistent with the style of the input box component generated by the placeholder function, and the content of the inline element is the same as that of the placeholder function. The placeholder text of the generated input box components is consistent. Among them, the in-line element refers to the in-line element in HTML. Because it does not need to occupy a line, it can be displayed at the same position as the new input box. Therefore, it can be simulated when the input box is overlapped with the input box. display effect. Specifically, the in-line element can be a span tag. A span tag is one of the in-line elements that can be used to combine documents. Because a span does not have a fixed format expression, when a style is applied to it, it will produce a visual change. Therefore, it can be applied to the browser input box display method provided in this embodiment. By performing style control on the span tag, the style control of the input box can be completed visually.

It should be noted that the placeholder text in this embodiment refers to the information displayed in the input box when no content is input in the input box. Commonly, the prompt information displayed in gray is common, as shown in FIG. 4. See the two input boxes on the QQ login interface in Figure 4. The input box located above is the input box for "Account". When the user does not enter content, the placeholder text displayed on it is "QQ number / mobile phone / email "; The input box at the bottom is the" password "input box, and the placeholder text displayed on it is" password "when the user has not entered anything.

In addition, the style of the element in the row refers to the presentation form of the input box, which includes a frame line, a pattern, a pattern, and the like that highlight the input box. Taking the QQ login interface as an example, the style of the in-line element corresponding to the input box located above can be "penguin-shaped shadow pattern + underline + down arrow on the right side"; the style of the in-line element corresponding to the input box located above can be " Lock pattern + underline + keyboard icon on the right. "

Further, for input box components generated by using the placeholder function, the placeholder text usually has the following characteristics: when there is no content in the input box, the placeholder text is displayed; when there is content in the input box, the placeholder is hidden text. Therefore, in order to make the in-line elements simulate this effect, referring to FIG. 5, after step S104, the method for displaying a browser input box may further include:

S301. Monitor the value in the new input box.

S302. If there is a value in the new input box, adjust the content of the element in the row to a hidden state.

S303. If there is no value in the new input box, adjust the content of the element in the row to a display state.

For step S301, after adding inline elements to the new input box in step S104, from the display effect, placeholder text should be displayed on the new input box. Thereafter, the server can listen to the new input box on the browser. The value of the input box, so that you can know whether there is a value on the new input box when the value changes, so that the content of the elements in the row can be adjusted according to the presence or absence of the value in the new input box. status.

For step S302, if there is a value in the new input box, it means that there is content in the input box. Generally, the content on the input box needs to be displayed. In order not to block the content displayed in the input box and simulate the placeholder text. In general, the content of the elements in the row can be adjusted to a hidden state. This hidden state means that when the content of the inline element is generated on the browser's page, it is not displayed and cannot be viewed by the user. The opposite of the hidden state is the display state. When the content of the inline elements in the display state is generated on the page of the browser, it is displayed in the position of the input box according to a preset style, which the user can view.

Further, before step S302, the method may further include: if there is a value in the new input box, obtaining the current first state of the content of the element in the row; if the first state is a hidden state, no adjustment is performed. A state of the content of the element in the row; if the first state is a display state, adjusting the content of the element in the row to a hidden state. It can be understood that when the new input box has a value, it is necessary to obtain and determine whether the current state of the content of the element in the line is hidden or displayed. If it is hidden, it is obviously unnecessary to adjust the value. The state of the content of the element in the row; otherwise, the content of the element in the row needs to be adjusted to the hidden state.

For step S303, if there is no value in the new input box, it means that there is no content in the input box. In the case where the content of the inline element is set, for simulation, the general characteristics of the placeholder text may be The content of the element is adjusted to the display state.

Further, before step S303, the method may further include: if there is no value in the new input box, obtaining a current second state of the content of the element in the row; if the second state is a display state, no adjustment is performed. A state of the content of the element in the row; if the second state is a hidden state, adjusting the content of the element in the row to a display state. It can be understood that when there is no value in the new input box, it is necessary to obtain and determine whether the current state of the content of the element in the row is hidden or displayed. If it is originally displayed, it is obviously unnecessary to adjust the value. The state of the content of the element in the row; otherwise, the content of the element in the row needs to be adjusted to the display state.

This embodiment executes the above steps S101 to S104, and a new problem may occur in a certain application scenario. For example, the user has been using the first version of the browser of a certain client. The first version of the browser supports the placeholder function. Therefore, after loading the target project, the placeholder function is used to generate the input box component. The style of the input box component Determined by the first version of the browser; however, the user later upgraded the client's browser, assuming the second version of the browser, the second version of the browser no longer supports the placeholder function, which requires this method Add an inline element to the input box position. However, the problem here is that the style displayed by adding inline elements on the second version of the browser is different from the style obtained by using the placeholder function in the first version of the browser. After this support status is switched, the styles are inconsistent. The situation is likely to be perceived by the user, which is not conducive to the user experience.

Further, this embodiment addresses the above problems, and solves the following steps based on the above steps S101-S104. As shown in FIG. 6, before executing step S103 to generate a new input box without a placeholder function, the method may further include:

S401. Determine whether the client browser supports the placeholder function when the target project was last loaded. If not, perform the above step S103, and if yes, perform step S402;

S402. Obtain a placeholder style attribute used by the client browser when the target project was last loaded.

S403. When receiving a request to display an input box on the browser, generate a new input box without a placeholder function required by the target item on a display page of the browser;

S404. Add an inline element with a placeholder style attribute that was used when the target item was last loaded on the new input box position, and the content of the inline element and the placeholder of the input box component generated by using the placeholder function Character text is consistent.

For step S401, the method determines whether the browser of the client supports the placeholder function by determining whether the browser's browser last loaded the target item to support the placeholder function. The switching of the support status mentioned here refers to the case where the client browser supported the placeholder function when the target project was last loaded, but did not support the placeholder function when the target project was loaded this time. This implementation The example refers to this situation as support state switching. There are many possible reasons for switching the support status. It is common that the browser version of the client has changed. For example, after the version is upgraded, the old version that originally supported the placeholder function is upgraded to a new version that no longer supports the placeholder function. . If there is no switching of the support status, it means that the client's browser did not support the placeholder function when the target project was loaded last time, and the browser of the client does not support the placeholder function. In this case, the placeholder The style of the symbol is the same before and after, and will not be noticed by the user. Therefore, the above step S103 may be performed.

For step 402, in this embodiment, the server can obtain and record the client's ID (that is, the unique identifier), the browser version number, the placeholder style attribute used each time, and the item loaded each time when communicating with the client. Time, and store the correspondence between the client ID, browser version number, placeholder style attributes for each use, and time to load the item. Therefore, when it is determined that the client's browser last loaded the target item, it supports the placeholder function, that is, when the support status is switched, the server can obtain the client's browser's last load of the target item. The placeholder style attribute adopted.

It should be noted that the placeholder style attributes mentioned herein may include the color, font, font size, etc. of the placeholder style.

Furthermore, as shown in FIG. 7, the step S402 may specifically include:

S501. Query the style attribute history to determine the loading time of the client's browser when the target item was last loaded. The style attribute history records the loading time and the placeholder used each time the client loads the item. The correspondence between the style attributes

S502. Obtain a placeholder style attribute corresponding to the determined loading time according to the style attribute history.

For step S501, in this embodiment, a style attribute history can be established in advance, and the style attribute history records at least the correspondence between the loading time of the client each time the item is loaded and the placeholder style attribute used In particular, the correspondence between the client's ID (that is, the unique identifier), the browser version number, the placeholder style attribute for each use, and the load time for each item loaded can also be specifically recorded.

For step S502, after determining the loading time of the last time the target item is loaded, according to the corresponding relationship recorded in the style attribute history, it is possible to directly find the placeholder style attribute adopted by the client browser at the loading time.

To facilitate understanding, as shown in FIG. 8, the history history of the style attributes can be obtained in advance through the following steps:

S601. After the client browser successfully loads the input box each time the project is loaded, intercept the loaded effect picture of the input box with placeholder text;

S602. Perform image recognition on the effect picture to obtain a placeholder style attribute on the input box.

S603. Obtain the loading time of the current loading item of the browser of the client;

S604. Store the loading time and the obtained placeholder style attributes in association with each other to obtain the style attribute history.

For step S601, it can be understood that each time when a client browser successfully loads an input box, whether using the method of the embodiment or the placeholder function, the text with the placeholder can be displayed. Input box. At this time, the server can intercept the loaded effect picture of the input box.

For step S602, it can be known that, through the image recognition technology, attributes such as the color, font, and font size of the placeholder style on the input box can be identified from the effect picture.

For steps S603 and S604, after obtaining the placeholder style attributes, in order to facilitate the subsequent search and acquisition by the server, it is necessary to obtain the loading time of the loaded project, and even obtain the client corresponding to the placeholder style attributes used this time. The ID and the browser version number are then stored in association with each other to obtain the style attribute history.

The principle of step S403 is similar to the above step S103, and details are not described herein again.

For step S404, it can be known that, in order to make the user still not notice that the placeholder style of the input box is changed when the support state is switched, it is necessary to simulate the effect of the placeholder style when the target item was last loaded. Therefore, The server of this embodiment may add an inline element with a placeholder style attribute when the client browser loads the target item last time on the new input box position, and the content of the inline element and the use of the placeholder The placeholder text of the input box component generated by the function is consistent. Therefore, in the display effect, the user cannot detect the visual difference of the input box before and after the two times, which avoids reducing the user experience due to the difference in the placeholder style of the input box. Happening.

In this embodiment, the style of the inline element is controlled to make the style of the inline element consistent with the style of the input box component generated by the placeholder function, and the content of the inline element is the same as that of the input box component generated by the placeholder function. The placeholder text is the same, users will not perceive that the placeholder function of the input box is unavailable. The style and placeholder text of the input box can be displayed normally, making the server project compatible with all browser kernel versions of the client, avoiding The input box displays abnormal conditions, which improves the user experience.

It should be understood that the size of the sequence numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

In one embodiment, a browser input box display device is provided, and the browser input box display device corresponds to the browser input box display method in the above embodiment in a one-to-one correspondence. As shown in FIG. 9, the browser input box display device includes a function detection module 701, an input box generating module 702, and an in-line element adding module 703. The detailed description of each function module is as follows:

A function detection module 701, configured to detect whether the browser supports a placeholder function after the client browser loads the target item;

An input box generating module 702 is configured to generate a new input box without a placeholder function when a request for displaying an input box on the browser is received if the detection result of the function detection module is negative;

In-line element adding module 703 is configured to add a preset in-line element to the new input box position, and the style of the in-line element is consistent with the style of the input box component generated by using the placeholder function. The content is consistent with the placeholder text of the input box component generated by the placeholder function.

Further, the browser input box display device may further include:

A function judgment module, configured to judge whether the client browser supports a placeholder function when the target project was last loaded;

A first triggering module, configured to trigger the input box generating module if the judgment result of the function judgment module is negative;

An attribute obtaining module, configured to obtain a placeholder style attribute used when the browser of the client terminal loads the target item last time if the judgment result of the function judgment module is yes;

A first generating module, configured to generate a new input box without a placeholder function when receiving a request to display the input box on the browser;

An element adding module, configured to add an in-line element with a placeholder style attribute used when the target item was last loaded on the new input box position generated by the first generating module, and the content and the adoption of the in-line element The placeholder text generated by the placeholder function is consistent with the placeholder text.

Further, the attribute obtaining module may specifically include:

A record query unit is used for querying the style attribute history to determine the loading time of the client's browser when the target item was last loaded, and the style attribute history records the loading time and the loading time of each time the client loads the item. Correspondence of adopted placeholder style attributes;

An attribute determining unit, configured to obtain a placeholder style attribute corresponding to the determined loading time according to the style attribute history;

The style attribute history is obtained in advance through the following modules:

A picture interception module, configured to intercept the loaded effect picture of the input box with placeholder text after the input box is successfully loaded each time the browser of the client loads the item;

An image recognition module, configured to perform image recognition on the effect picture to obtain a placeholder style attribute on the input box;

A loading time obtaining module, configured to obtain a loading time of a project loaded by the browser of the client this time;

An associative storage module is configured to associate and store the loading time and the obtained placeholder style attributes to obtain the style attribute history.

Further, the function detection module may include:

An input box new unit for creating a test input box on the browser;

An input box judging unit, configured to determine whether the input box for testing has a placeholder attribute;

A first determining unit, configured to determine that the browser supports a placeholder function if the judgment result of the input box judgment unit is yes;

The second determining unit is configured to determine that the browser does not support a placeholder function if the judgment result of the input box judgment unit is no.

Further, the browser input box display device may further include:

An input value monitoring module, configured to monitor a value in the new input box;

A hiding module, configured to adjust the content of the element in the row to a hidden state if the input value monitoring module listens to a value in the new input box;

The display module is configured to adjust the content of the element in the row to a display state if the input value monitoring module monitors that there is no value in the new input box.

For the specific limitation of the browser input box display device, refer to the limitation on the browser input box display method described above, and details are not described herein again. Each module in the browser input box display device can be implemented in whole or in part by software, hardware, and a combination thereof. The above-mentioned modules may be embedded in the hardware in or independent of the processor in the computer device, or may be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as shown in FIG. 10. The computer device includes a processor, a memory, a network interface, and a database connected through a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer-readable instructions, and a database. The internal memory provides an environment for the operation of the operating system and computer-readable instructions in a non-volatile storage medium. The database of the computer equipment is used to store data involved in the browser input box display method. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer-readable instructions are executed by a processor, a browser input box display method is implemented.

In one embodiment, a computer device is provided, including a memory, a processor, and computer-readable instructions stored on the memory and executable on the processor. When the processor executes the computer-readable instructions, the browsing in the foregoing embodiment is implemented. The input box displays the steps of the method, such as step S101 to step S104 shown in FIG. 2. Alternatively, when the processor executes the computer-readable instructions, the functions of each module / unit of the browser input box display device in the foregoing embodiment are implemented, for example, the functions of modules 701 to 703 shown in FIG. 9. To avoid repetition, we will not repeat them here.

In one embodiment, a computer-readable storage medium is provided, the one or more non-volatile storage mediums storing computer-readable instructions, and the computer-readable instructions are executed by one or more processors. , So that when one or more processors execute computer-readable instructions, the steps of the browser input box display method in the foregoing method embodiment are implemented, or the one or more non-volatile readable storages storing computer-readable instructions Medium, when the computer-readable instructions are executed by one or more processors, causing the one or more processors to implement the computer-readable instructions to implement the functions of the modules / units in the browser input box display device in the above device embodiment. To avoid repetition, we will not repeat them here.

A person of ordinary skill in the art can understand that all or part of the processes in the methods of the foregoing embodiments can be implemented by using computer-readable instructions to instruct related hardware. The computer-readable instructions can be stored in a nonvolatile computer In the readable storage medium, the computer-readable instructions, when executed, may include the processes of the embodiments of the methods described above. Wherein, any reference to the storage, storage, database, or other media used in the embodiments provided in this application may include non-volatile and / or volatile storage. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous chain (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

Those skilled in the art can clearly understand that, for the convenience and brevity of the description, only the above-mentioned division of functional units and modules is used as an example. In practical applications, the above functions can be assigned by different functional units, Module completion, that is, dividing the internal structure of the device into different functional units or modules to complete all or part of the functions described above.

The above-mentioned embodiments are only used to describe the technical solution of the present application, but not limited thereto. Although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that they can still implement the foregoing implementations. The technical solutions described in the examples are modified, or some of the technical features are equivalently replaced; and these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should be included in Within the scope of this application.

Claims

A browser input box display method is characterized in that it includes:

After the client browser loads the target item, detecting whether the browser supports a placeholder function;

If the browser does not support the placeholder function, when receiving a request to display an input box on the browser, the non-placeholder function required to generate the target item on the browser's display page is generated New input box;

Adding a preset inline element on the new input box position to simulate the new input box as an input box component with a placeholder function, wherein the style of the inline element and the use of the placeholder function The generated input box component has the same style, and the content of the elements in the line is consistent with the placeholder text of the input box component generated by using the placeholder function.
The method for displaying an input box of a browser according to claim 1, before generating a new input box without a placeholder function, further comprising: judging whether the client browser loaded a target item last time Support placeholder function;

If the browser of the client side did not support the placeholder function when loading the target project last time, performing the step of generating a new input box without the placeholder function;

If the browser of the client supports the placeholder function when the target item was last loaded, obtaining the placeholder style attribute used by the client's browser when the target item was last loaded;

When receiving a request to display an input box on the browser, generate a new input box without a placeholder function required by the target item on a display page of the browser; in the new input box An inline element with a placeholder style attribute used when the target item was last loaded is added to the position, and the content of the inline element is consistent with the placeholder text of the input box component generated by the placeholder function.
The method for displaying a browser input box according to claim 2, wherein the step of obtaining a placeholder style attribute used by the client's browser when the target project was last loaded specifically comprises:

Query style attribute history to determine the loading time of the client's browser when the target item was last loaded. The style attribute history records the loading time and placeholder style used each time the client loads an item. Correspondence of attributes;

Obtaining a placeholder style attribute corresponding to the determined loading time according to the style attribute history;

The style attribute history is obtained in advance through the following steps:

After the client browser successfully loads the input box each time the project is loaded, intercept the loaded effect picture of the input box with placeholder text;

Performing image recognition on the effect picture to obtain a placeholder style attribute on the input box;

Obtaining the loading time of the client browser's current loading item;

The loading time and the obtained placeholder style attributes are stored in association, and the style attribute history is obtained.
The method for displaying a browser input box according to claim 1, wherein the detecting whether the browser supports a placeholder function comprises:

Create a new input box for testing on the browser;

Judging whether the input box for testing has a placeholder attribute;

If the input box for testing has a placeholder attribute, determining that the browser supports a placeholder function;

If the input box for testing does not have a placeholder attribute, it is determined that the browser does not support the placeholder function.
The browser input box display method according to any one of claims 1 to 4, wherein after adding a preset inline element to the new input box position, the browser input box display method further comprises: include:

Listening to the value in the new input box;

If there is a value in the new input box, adjusting the content of the element in the row to a hidden state;

If there is no value in the new input box, the content of the element in the row is adjusted to a display state.
A browser input box display device, comprising:

A function detection module, configured to detect whether the browser supports a placeholder function after the browser of the client loads the target item;

An input box generating module is configured to generate a target item on a display page of a browser when a request for displaying an input box on the browser is received if a detection result of the function detection module is negative. New input box without placeholder function;

In-line element adding module is configured to add a preset in-line element at the position of the new input box, so as to simulate the new input box into an input box component with a placeholder function. The style is consistent with the style of the input box component generated by using the placeholder function, and the content of the elements in the row is consistent with the placeholder text of the input box component generated by using the placeholder function.
The browser input box display device according to claim 6, wherein the browser input box display device further comprises:

A function judgment module, configured to judge whether the client browser supports a placeholder function when the target project was last loaded;

A first triggering module, configured to trigger the input box generating module if the judgment result of the function judgment module is negative;

An attribute obtaining module, configured to obtain a placeholder style attribute used by the client browser when the browser's browser last loaded the target item if the judgment result of the function judgment module is yes;

A first generating module, configured to generate a new input box without a placeholder function required by the target item on a display page of the browser when a request for displaying the input box on the browser is received;

An element adding module, configured to add an in-line element with a placeholder style attribute used when the target item was last loaded on the new input box position generated by the first generating module, and the content and the adoption of the in-line element The placeholder text generated by the placeholder function is consistent with the placeholder text.
The browser input box display device according to claim 7, wherein the attribute acquisition module specifically comprises:

A record query unit is used for querying the style attribute history to determine the loading time of the client's browser when the target item was last loaded, and the style attribute history records the loading time and the loading time of each time the client loads the item. Correspondence of adopted placeholder style attributes;

An attribute determining unit, configured to obtain a placeholder style attribute corresponding to the determined loading time according to the style attribute history;

The style attribute history is obtained in advance through the following modules:

A picture interception module, configured to intercept the loaded effect picture of the input box with placeholder text after the input box is successfully loaded each time the browser of the client loads the item;

An image recognition module, configured to perform image recognition on the effect picture to obtain a placeholder style attribute on the input box;

A loading time obtaining module, configured to obtain a loading time of a project loaded by the browser of the client this time;

An associative storage module is configured to associate and store the loading time and the obtained placeholder style attributes to obtain the style attribute history.
The browser input box display device according to claim 6, wherein the function detection module comprises:

An input box new unit for creating a test input box on the browser;

An input box judging unit, configured to determine whether the input box for testing has a placeholder attribute;

A first determining unit, configured to determine that the browser supports a placeholder function if the judgment result of the input box judgment unit is yes;

The second determining unit is configured to determine that the browser does not support a placeholder function if the judgment result of the input box judgment unit is no.
The browser input box display device according to any one of claims 6 to 9, wherein the browser input box display device further comprises:

An input value monitoring module, configured to monitor a value in the new input box;

A hiding module, configured to adjust the content of the element in the row to a hidden state if the input value monitoring module listens to a value in the new input box;

The display module is configured to adjust the content of the element in the row to a display state if the input value monitoring module monitors that there is no value in the new input box.
A computer device includes a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, and is characterized in that the processor implements the computer-readable instructions as follows step:

After the client browser loads the target item, detecting whether the browser supports a placeholder function;

If the browser does not support the placeholder function, when receiving a request to display an input box on the browser, the non-placeholder function required to generate the target item on the browser's display page is generated New input box;

Adding a preset inline element on the new input box position to simulate the new input box as an input box component with a placeholder function, wherein the style of the inline element and the use of the placeholder function The generated input box component has the same style, and the content of the elements in the line is consistent with the placeholder text of the input box component generated by using the placeholder function.
The computer device according to claim 11, characterized in that before generating a new input box without a placeholder function, the processor, when executing the computer-readable instructions, further implements the following step: judging the client Whether the browser supports the placeholder function when the target project was last loaded;

If the browser of the client side did not support the placeholder function when loading the target project last time, performing the step of generating a new input box without the placeholder function;

If the browser of the client supports the placeholder function when the target item was last loaded, obtaining the placeholder style attribute used by the client's browser when the target item was last loaded;

When receiving a request to display an input box on the browser, generate a new input box without a placeholder function required by the target item on a display page of the browser; in the new input box An inline element with a placeholder style attribute used when the target item was last loaded is added to the position, and the content of the inline element is consistent with the placeholder text of the input box component generated by the placeholder function.
The computer device according to claim 12, wherein the obtaining a placeholder style attribute used when the browser of the client terminal loads a target item last time comprises:

Query style attribute history to determine the loading time of the client's browser when the target item was last loaded. The style attribute history records the loading time and placeholder style used each time the client loads an item. Correspondence of attributes;

Obtaining a placeholder style attribute corresponding to the determined loading time according to the style attribute history;

The style attribute history is obtained in advance through the following steps:

After the client browser successfully loads the input box each time the project is loaded, intercept the loaded effect picture of the input box with placeholder text;

Performing image recognition on the effect picture to obtain a placeholder style attribute on the input box;

Obtaining the loading time of the client browser's current loading item;

The loading time and the obtained placeholder style attributes are stored in association, and the style attribute history is obtained.
The computer device according to claim 11, wherein the detecting whether the browser supports a placeholder function comprises:

Create a new input box for testing on the browser;

Judging whether the input box for testing has a placeholder attribute;

If the input box for testing has a placeholder attribute, determining that the browser supports a placeholder function;

If the input box for testing does not have a placeholder attribute, it is determined that the browser does not support the placeholder function.
The computer device according to any one of claims 11 to 14, wherein after a preset inline element is added to the new input box position, the processor further executes the computer-readable instruction. To achieve the following steps:

Listening to the value in the new input box;

If there is a value in the new input box, adjusting the content of the element in the row to a hidden state;

If there is no value in the new input box, the content of the element in the row is adjusted to a display state.
One or more non-volatile readable storage media storing computer readable instructions, characterized in that when the computer readable instructions are executed by one or more processors, the one or more processors are caused to execute The following steps:

After the client browser loads the target item, detecting whether the browser supports a placeholder function;

If the browser does not support the placeholder function, when receiving a request to display an input box on the browser, the non-placeholder function required to generate the target item on the browser's display page is generated New input box;

Adding a preset inline element on the new input box position to simulate the new input box as an input box component with a placeholder function, wherein the style of the inline element and the use of the placeholder function The generated input box component has the same style, and the content of the elements in the line is consistent with the placeholder text of the input box component generated by using the placeholder function.
The non-volatile readable storage medium according to claim 16, wherein before generating a new input box without a placeholder function, the computer-readable instructions are executed by one or more processors. So that the one or more processors further perform the following steps: determine whether the client browser supports a placeholder function when the target item was last loaded;

If the browser of the client side did not support the placeholder function when loading the target project last time, performing the step of generating a new input box without the placeholder function;

If the browser of the client supports the placeholder function when the target item was last loaded, obtaining the placeholder style attribute used by the client's browser when the target item was last loaded;

When receiving a request to display an input box on the browser, generate a new input box without a placeholder function required by the target item on a display page of the browser; in the new input box An inline element with a placeholder style attribute used when the target item was last loaded is added to the position, and the content of the inline element is consistent with the placeholder text of the input box component generated by the placeholder function.
The non-volatile readable storage medium according to claim 17, wherein the obtaining the placeholder style attributes used when the browser of the client last loaded the target item specifically comprises:

Query style attribute history to determine the loading time of the client's browser when the target item was last loaded. The style attribute history records the loading time and placeholder style used each time the client loads an item. Correspondence of attributes;

Obtaining a placeholder style attribute corresponding to the determined loading time according to the style attribute history;

The style attribute history is obtained in advance through the following steps:

After the client browser successfully loads the input box each time the project is loaded, intercept the loaded effect picture of the input box with placeholder text;

Performing image recognition on the effect picture to obtain a placeholder style attribute on the input box;

Obtaining the loading time of the client browser's current loading item;

The loading time and the obtained placeholder style attributes are stored in association, and the style attribute history is obtained.
The non-volatile readable storage medium according to claim 16, wherein the detecting whether the browser supports a placeholder function comprises:

Create a new input box for testing on the browser;

Judging whether the input box for testing has a placeholder attribute;

If the input box for testing has a placeholder attribute, determining that the browser supports a placeholder function;

If the input box for testing does not have a placeholder attribute, it is determined that the browser does not support the placeholder function.
The non-volatile readable storage medium according to any one of claims 16 to 19, wherein after adding a preset in-line element to the new input box position, the computer-readable instructions are When the one or more processors execute, the one or more processors further perform the following steps:

Listening to the value in the new input box;

If there is a value in the new input box, adjusting the content of the element in the row to a hidden state;

If there is no value in the new input box, the content of the element in the row is adjusted to a display state.