标签:
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js
// 兼容IE8以下浏览器input不能智能提示功能 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) { var input = $(this); if(input.attr(‘placeholder‘)!=‘‘){ var def_val = input.attr(‘placeholder‘) var def_color = input.css(‘color‘) // 默认表单原有颜色 var tip_color = ‘#999‘ // 提示信息的颜色 input.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) } }); } }); }
以上代码可以达到兼容IE8以下的浏览器的智能提示的效果,但是验证表单却会出问题,特别是我用的jq表单验证插件validate。
原因在于,IE8以下默认给input表单value=‘提示信息‘,这样值本身不为空的情况下,用validate验证必填(required:true)时会失效。
我的处理方法是,在jquery.validate.js文件里required验证方法内添加验证其value值不能等于placeholder值,代码如下:
// http://docs.jquery.com/Plugins/Validation/Methods/required required: function( value, element, param ) { // check if dependency is met if ( !this.depend(param, element) ) { return "dependency-mismatch"; } if ( element.nodeName.toLowerCase() === "select" ) { // could be an array for select-multiple or a string, both are fine this way var val = $(element).val(); return val && val.length > 0; } if ( this.checkable(element) ) { return this.getLength(value, element) > 0; } return ( $.trim(value).length > 0 ) && ( $.trim(value) != $(element).attr(‘placeholder‘) ); // 添加验证其value值不能等于placeholder值 }
这样就能圆满解决IE8以下表单智能提示和表单验证问题了~
兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
标签:
原文地址:http://www.cnblogs.com/hoasou/p/4757392.html