How to solve the compatibility of ie placeholder attributes
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!
