[Arrangement] placeholder of the text input box is implemented in different Javascript methods.

After the placeholder of the text input box is elegantly implemented by Javascript in the previous article, it tries to find other better ways to implement this placeholder.

 

The placeholder effect we want to achieve is:

When the keyboard drops, the placeholder is cleared,

If the value is empty when the keyboard is lifted, the placeholder is restored.

There are various implementation methods, as shown below:

 

Method 1:

The advanced browser uses the placeholder attribute for input. For IE, perform separate processing.

The Processing Method of IE.

1. register the keydown and focus events and change placeholder to the value of value. (When a low-level browser registers keyup, The keydown feature has a flash bug)

Disadvantage: A. In the end, it cannot be implemented under ie. When the keyboard keyup is used, the placeholder will be restored immediately if the value is empty.

Only downgrade is allowed. In IE, when the cursor is lost, the system determines whether the value is null. If it is null, The placeholder is restored.

Advantage: A. Compared with the second method, you do not need to consider copying text to the input box, automatic filling, and so on, which may cause text overlapping with placeholder.

 

Method 2:

Create a span tag near input. The content of span is the content of placeholder. Use absolute positioning to compress span over input.

Two processing methods.

1. ReferUse JavaScript to elegantly implement placeholder in text input boxesMethod in

Idea: advanced browser: register the keyup and keydown events.

Low-level browsers: register the keydown and focus events. (Because the low-level browser registers keyup, keydown has a flash bug)

Disadvantage: A. In the end, it cannot be implemented under ie. When the keyboard keyup is used, the placeholder will be restored immediately if the value is empty.

Only downgrade is allowed. In IE, when the cursor is lost, the system determines whether the value is null. If it is null, The placeholder is restored.

B. Copy the text and drag it directly to the input box, or automatically fill in the user name. This will cause the placeholder to overlap with the value and it is difficult to solve this bug.

2. Use oninput events for input. And compatible with IE.

Idea: Use the oninput event. When the input value changes, the listener determines whether it is empty. If it is empty, the system displays placeholder. Otherwise, the system hides placeholder.

Advantage: A. It can make ie consistent with advanced browsers.

B. Fixed the bug of overlapping placeholder and value due to text copying.

Disadvantage: A. in the FF browser, when the user name and password are automatically filled, the password domain will still overlap.

However, this bug can be solved. For example, you can register oninput separately for the user name so that the password domain is cleared in milliseconds after the value is changed.

 

To sum up:

If IE must be exactly the same as that of advanced browsers. It can be implemented using the method 2, but this method is complicated and needs to solve many bugs.

If you do not need to worry about ie performance (the value is empty, the placeholder is restored only when the cursor is lost, rather than the placeholder is restored immediately when the keyboard is lifted), you can use the first method to implement it, which is simple, and contribute a line to support new attributesCode.

 

In addition:

In the second method, when the style sheet fails, the placeholder can be displayed. The placeholder and input can be placed under a label, so that the user can click the text and the input will automatically get the cursor.

If you want to implement this feature in the second method, you can write a hidden span next to the input. The style sheet is enclosed in the same label as the input, and can still enjoy a good user experience when it becomes invalid.