Placeholder compatible processing (under jquery)

This is an old problem, combined with the experience of predecessors, there are a few problems to be dealt with.

1. This type of compatibility is only required when the Palaceholder attribute exists in the input box (Input/textarea)

2. Handle the text display with focus and focus on the input box

3. The Password input box is special because it displays a string of "* * *" when it is set to display text. This problem is analyzed later. Deal with the first two points or relatively simple, the processing source is as follows

varBrowsersupport ={placeholder:' Placeholder 'inchDocument.createelement (' Input ')}$(function() {    //Analog Placeholder    if( !Browsersupport.placeholder) {        $(' Input[placeholder],textarea[placeholder] '). each (function(){            varthat = $ ( This), Text= that.attr (' placeholder '), Oldtype; if(That.val () = = = "") {that.val (text). addclass (' Placeholder '); } that.focus (function(){                //IE8 under the ReadOnly can still focus on the treatment                if(That.attr (' readonly ') ) {That.blur (); return; } that.removeclass (' Placeholder '); if(That.val () = = =text) {That.val (""); }}). blur (function(){                if(That.val () = = = "") {that.val (text). addclass (' Placeholder '); //prevent exceptions: when there is a placeholder class and the value is not empty (the code is easy to set up)}Else{That.removeclass (' Placeholder '); }}). Closest (' form '). Submit (function(){                   if(That.val () = = =text) {That.val (‘‘);           }               });    });    }}); 

It can be seen that processing is relatively simple. Add class placeholder to the placeholder blank input box without the focus on the browser that does not support placeholder and set its contents to the placeholder value. The placeholder input box on the focus determines whether its value is a manually set placeholder value, or the Reset input box is blank if it is. Of course, it is unavoidable to submit the form to remove the effect of compatible placeholder.

There is a detail event that is bound to the cache of the tag, not to the ancestor nodes such as the document, why? There are two considerations:1. Avoid setting events to prevent bubbling causes events that are bound to document to be unhandled. 2. The order in which the events are executed is to execute the events bound to their own node first, and then the event source delegates to the document when bubbling to the document node .

　　

The question of the 3rd password input box. Our first consideration is that when the password input box is out of focus, change the type of the input box to the text type and then set its value to placeholder value as normal, and set the type value back and restore its value when focusing. However, this existence problem is that IE8 does not allow the type to be changed. No, only an extra element is added to show the placeholder value of the password input box. As a result, the complete source code becomes the following

/*. placeholder{color: #aaa!important;}    span.placeholder{Position:absolute;    left:0;    line-height:34px; padding-left:12px;}*/varBrowsersupport ={placeholder:' Placeholder 'inchDocument.createelement (' Input ')}/*Ajax request found not logged in, the server returned 401 error, and then the unified processing 401 error, jump to the login page*/$ (document). Ready (function() {    //Analog Placeholder    if( !Browsersupport.placeholder) {        $(' Input[placeholder],textarea[placeholder] '). each (function(){            varthat = $ ( This), Text= that.attr (' placeholder '), Oldtype; if(That.val () = = = ""){                 If(that.attr (' type ')! = ' Password ') {that.val (text). addclass (' placeholder '); }Else{that.before (' <span class= "placeholder" > Please enter a password </s Pan> '); } } that.focus (function(){                //IE8 under the ReadOnly can still focus on the treatment                if(That.attr (' readonly ') ) {That.blur (); return; }                //Clear Span.placeholder                That.prev ("Span.placeholder" ). Remove (); That.removeclass (' Placeholder '); if(That.val () = = =text) {That.val (""); }}). blur (function(){                if(That.val () = = = ""){                     If(that.attr (' type ')! = ' Password ') {that.val (text). addclass (' placeholder ') ); }Else{that.before (' <span class= "placeholder" > Please enter password </span> ') ; } //prevent exceptions: when there is a placeholder class and the value is not empty (the code is easy to set up)}Else{That.removeclass (' Placeholder '); }}). Closest (' form '). Submit (function(){                   if(That.val () = = =text) {That.val (‘‘);           }               });       }); $ (document). On ( ' click ', ' span.placeholder ',function() {$ (this). Next ("[placeholder]"). Focu S ();  // Delete Span.placeholder will be performed in the focus of [placeholder]         })    }})

I specifically added a span.placeholder to display the placeholder display of the password input box. Then added a listener to monitor the span.placeholder to be clicked.

function is completed, in the test will still encounter a problem, the browser can automatically fill out the form when the initialization may be abnormal, so far there is no good way to capture the auto-fill form event, the results may cause the Password input box placeholder display and content display together. So if you want to use this password input box placeholder compatibility, it is best to let the browser does not autofill, but also conducive to information privacy: password input settings autocomplete=off can be.

It is important to note that Autocomplete=off has compatibility issues with Chrome, but there is no problem with IE, except that Chrome is not confidential. More information on their own Baidu.

　　If you feel this article is good, please click on the bottom right "recommended"!

Placeholder compatible processing (under jquery)