Placeholder performance and compatibility methods under different browsers

1. What is placeholder?

Placeholder is a new property of HTML5, and when input or textarea is set, the content of the value is displayed as a gray hint in the text box, and the text box disappears when it gets the focus (or input).

The wording is as follows:

2. Placeholder browser compatibility and performance under different browsers

Since placeholder is a new attribute of HTML5, it is conceivable that only browsers that support HTML5 support placeholder, the latest Firefox, Chrome, Safari, and IE10 support, IE6 to IE9 are not supported.

Here's how it looks in each browser:

Firefox:

Chrome:

Safari:

ie10:

As you can see, placeholder's text is basically light gray in every browser.

The difference is that, under FF and Chrome, when the input box has the focus, the placeholder text does not change, and the placeholder text disappears only when the input box is entered, while in Safari and Ie10, when the input box gets the focus, Placeholder text disappears immediately.

By default, placeholder text is gray and the text you enter is black. and the color values on the designs we get are often not exactly the same as the default. So, how to modify the color value of placeholder?

If you write input{color:red directly, you can see that under IE10 and FF, placeholder text and input text all turn red, as follows:

Ff:

Ie10:

Under Chrome and Safari, the placeholder text color does not change, only the input text turns red.

Obviously, this is not a feasible practice. Because we just want to change the color of the placeholder text, we don't want to change the color of the input text.

The correct wording is as follows:

::-moz-placeholder{color:red;} Ff

::-webkit-input-placeholder{color:red;} Chrome,safari

:-ms-input-placeholder{color:red;} Ie10

3. How to make placeholder compatible with all browsers

As we know earlier, IE6 to IE9 does not support native placeholder and does not perform consistently even on browsers that support native placeholder. In a real-world project, how do you make all browsers consistently support placeholder?

(1) If you only need to allow browsers that do not support placeholder to support the change function, and do not require the browser to support native placeholder to behave consistently, you can use the following methods:

function placeholder (nodes,pcolor) {

if (Nodes.length &&!) (" Placeholder "in document_createelement_x (" input "))) {

for (i=0;i

var self = nodes[i],

placeholder = Self.getattribute (' placeholder ') | | ‘‘;

Self.onfocus = function () {

if (Self.value = = placeholder) {

Self.value = ";

Self.style.color = "";

}

}

Self.onblur = function () {

if (Self.value = = ") {

Self.value = placeholder;

Self.style.color = Pcolor;

}

}

Self.value = placeholder;

Self.style.color = Pcolor;

}

}

}

(2) If you need to customize the style, and want to placeholder in all browsers, you can use the label tag to simulate a placeholder style placed on the input box, when the input box gets focus, hide the label, when the input box loses focus, Displays the label.

Or to apply a background image on input, to toggle whether the background image is displayed when you get and lose focus.

There are many ways to achieve this, and you are welcome to express your views.

Placeholder performance and compatibility methods under different browsers