Placeholder performance and compatibility methods in different browsers

1. What is placeholder?

Placeholder is a new attribute added to HTML5. When this attribute is set in input or textarea, the content of this value will be displayed as a gray prompt in the text box, when the text box gets the focus (or input content), the prompt text disappears. The statement is as follows:   2. placeholder's browser compatibility and performance in different browsers. Because placeholder is a new attribute of HTML5, it can be imagined that only HTML5 browsers support placeholder, currently, the latest Firefox, chrome, Safari, and ie10 are supported, whereas IE6 and ie9 are not supported. The following figure shows the Display Effect in various browsers: Firefox:

 

Chrome:

 

Safari:

 

Ie10:

 

It can be seen that the placeholder text is mostly dimmed in various browsers. The difference is that the placeholder text does not change when the input box gets the focus in ff and chrome. The placeholder text disappears only when the content is entered in the input box; in safari and ie10, The placeholder text disappears immediately when the input box gets the focus. By default, the placeholder text is gray and the input text is black. The color value on the design draft we get is often not exactly the same as that by default. So how can we modify the color value of placeholder? If you directly write the input {color: red;}, you can see that in ie10 and FF, The placeholder text and the input text are both red, as follows: FF: ie10: in Chrome and Safari, The placeholder text color remains unchanged, and only the input text turns red. Obviously, this approach does not work. Because we only want to change the color of the placeholder text and do not want to change the color of the input text. The correct syntax is as follows:-moz-placeholder {color: red;} // FF:-WebKit-input-placeholder {color: red;} // chrome, Safari: -MS-input-placeholder {color: red;} // ie10 3. We know how to make placeholder compatible with all browsers. IE6 to ie9 does not support native placeholder, and even in browsers that support native placeholder, the performance is not consistent. In actual projects, how can we make all browsers support placeholder consistently? (1) If you only need to allow a browser that does not support placeholder to support the modification function and does not require that the browser that supports native placeholder behave the same, you can use the following method: functionplaceholder (nodes, pcolor) {If (nodes. length &&! ("Placeholder" indocument_createelement_x ("input") {for (I = 0; I var self = nodes [I], placeholder = self. getattribute ('holder') | ''; 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 a style and want the placeholder to behave in the same way in all browsers, you can use the label Label to simulate a placeholder style and place it in the input box, when the input box obtains the focus, the label is hidden. When the input box loses the focus, the label is displayed. You can also apply the background image on the input file to check whether the background image is displayed when you get or lose the focus. There are many implementation methods.

Placeholder performance and compatibility methods in different browsers