Many of the current forms prompt using the Form property placeholder, this property is incompatible with IE8 the following browser, I wrote a compatible processing JS
//compatible with IE8 the following browser input does not function intelligently if(Navigator.appname = = "Microsoft Internet Explorer" && (Navigator.appVersion.match (/7./i) = = "7." | | Navigator.appVersion.match (/8./i) = = "8." | | Navigator.appVersion.match (/6./i) = = "6." | | Navigator.appVersion.match (/5./i) = = "5.")){ $(' Input[type=text] '). each (function(Index, Val) {varInput = $ ( This); if(Input.attr (' placeholder ')! = "){ varDef_val = input.attr (' placeholder ')) varDef_color = input.css (' Color ')//default form original color varTip_color = ' #999 '//color of the hint messageInput.css (' Color ', Tip_color) input.val (def_val) Input.on (' Focus ',function(event) {Input.css (' Color ', Def_color)if(Input.val () = =def_val) {Input.val (‘‘) } }); Input.on (' Blur ',function(event) {if(Input.val () = = "| | input.val () = =def_val) {Input.css (' Color ', Tip_color) Input.val (Def_val)}); } }); }
The above code can achieve the effect of smart hints for browsers that are compatible with IE8, but the validation form is problematic, especially the JQ form verification plugin validate I use.
The reason is that IE8 the following default to input form value= ' Prompt information ', so that the value itself is not empty, with validate verification required (Required:true) will be invalidated.
My approach is to add a validation method within the Jquery.validate.js file required verify that its value cannot be equal to the placeholder value, as follows:
//http://docs.jquery.com/Plugins/Validation/Methods/requiredRequiredfunction(value, element, param) {//Check if dependency is met if( ! This. Depend (param, Element)) { return"Dependency-mismatch"; } if(element.nodeName.toLowerCase () = = = "Select" ) { //could is an array for select-multiple or a string, both is fine this varval =$ (Element). Val (); returnVal && val.length > 0; } if( This. checkable (Element)) { return This. GetLength (value, Element) > 0; } return($.trim (value). length > 0) && ($.trim (value)! = $ (Element). attr (' placeholder '));//add to verify that its value cannot be equal to placeholder value}
This will solve the problem IE8 the following form smart hints and form validation issues ~
Compatible IE8 The following browser input form properties placeholder do not function intelligently, and issue handling with Jquery.validate.js forms validation plug-ins