Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to solve the compatibility of ie placeholder attributes". In daily operation, I believe many people have doubts about how to solve the compatibility of ie placeholder attributes. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to solve the compatibility of ie placeholder attributes". Next, please follow the editor to study!

Html 5 has a great attribute, placeholder. When the mouse is focused on it, the prompt text disappears, and after losing focus, it appears again:

However, in lower versions of browsers that do not support html5, the placeholder attribute is invalid. In order to solve this problem, the placeholder attribute is implemented artificially:

The code is as follows:

/ / placeholder function implementation

Var placeholder = {

Add: function (el) {

If (! ('placeholder' in document.createElement (' input') {

Var self = placeholder

El.each (function (e) {

If (IsEmpty (e.value ()) | | e.value () = = e.attr ('placeholder')) {

E.value (e.attr ('placeholder'))

E.css ('color',' gray')

}

Else {

E.css ('color',' black')

}

});

El.bind ('focus', self._onfocus)

El.bind ('click', self._onfocus)

El.bind ('blur', self._onblur)

El.bind ('keyup', self._onkeyup)

}

}

Remove: function (el) {

If (! ('placeholder' in document.createElement (' input') {

Var self = placeholder

El.unbind ('focus', self._onfocus)

El.unbind ('click', self._onfocus)

El.unbind ('blur', self._onblur)

}

}

Check: function (el) {

If (! ('placeholder' in document.createElement (' input') {

El.each (function (tar) {

If (IsEmpty (tar.value () {

Tar.value (tar.attr ('placeholder'))

}

});

}

}

Clear: function () {

If (! ('placeholder' in document.createElement (' input') {

$('input [type = "text"]') .each (function (el) {

If (el.value () = = el.attr ('placeholder')) {

El.value ('')

}

});

$('textarea') .each (function (el) {

If (el.value () = = el.attr ('placeholder')) {

El.value ('')

}

});

}

}

_ onfocus: function () {

If ($(this) .value () = = $(this) .attr ('placeholder'))

$(this) .value ('')

}

_ onblur: function () {

If (IsEmpty ($(this). Value ()) | | $(this) .value () = = $(this) .attr ('placeholder')) {

$(this) .value ($(this) .attr ('placeholder'))

$(this) .css ('color',' gray')

}

Else {

$(this) .css ('color',' black')

}

}

_ onkeyup: function () {

If (IsEmpty ($(this). Value ()) {

$(this) .css ('color',' gray')

}

Else {

$(this) .css ('color',' black')

}

}

}

When in use:

The code is as follows:

Placeholder.add ($('input [type = "text"]'))

Placeholder.add ($('textarea'))

It is important to note that if the type of input is password, placeholder displays. Properties of

In this case, the solution is:

Given two input boxes

One is text, the other is password.

When you have focus, switch to password, and when you lose focus, switch to text to display the placeholder property.

The code is as follows:

$(function () {)

Var pwd = $("# pwd")

Var password = $("# password")

Pwd.focus (function () {

Pwd.hide ()

Password.show () .focus ()

});

Password.focusout (function () {

If (password.val () .trim () = = "") {

Password.hide ()

Pwd.show ()

}

});

});

At this point, the study on "how to solve the compatibility of ie placeholder attributes" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.