当前很多表单提示使用了表单属性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不能智能提示功能的更多相关文章

  1. input type类型和input表单属性

    一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...

  2. Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能

    第4节 Laravel-通过表单实现新增及操作状态提示功能 4.1 显示新增表单视图 4.2 通过模型实现新增 4.3 操作状态提示 4.1 显示新增表单视图 修改边栏的链接 \resources\v ...

  3. IE不支持HTML5表单属性placeholder的解决办法

    1. [代码][JavaScript]代码 (function ($) {    $.fn.placeholder = function (options) {        var defaults ...

  4. js form表单 鼠标移入弹出提示功能

    JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...

  5. HTML表单属性与全局属性

    1.全局属性

  6. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  7. H5新增input表单、表单属性

    新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...

  8. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  9. 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器

    前言:本项目基于github开源插件实现,该插件使用flash实现,兼容IE8以上浏览器 感谢michalstocki的分享该项目,github项目地址:https://github.com/mich ...

随机推荐

  1. WPScan用法

    kali下集成的WPScan用法 1.刺探基础信息:wpscan --url http://www.example.com 2.猜解后台用户名wpscan --url http://www.examp ...

  2. Android View 事件分发机制 源码解析 (上)

    一直想写事件分发机制的文章,不管咋样,也得自己研究下事件分发的源码,写出心得~ 首先我们先写个简单的例子来测试View的事件转发的流程~ 1.案例 为了更好的研究View的事件转发,我们自定以一个My ...

  3. Maven项目中的pom.xml详解【转】

    什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url, ...

  4. Switch&NAT 测试

    测试环境: PC1:Windows10 iperf3 PC2:Ubuntu iperf3 都装有千兆网卡,直连的iperf速度是935Mbps. 因为TXRX两个方向的数据是差不多的,下面的测试数据只 ...

  5. 使用 VS Code 来编辑 markdown 文章

    一开始我就用 VS Code 来编辑 markdown 文本,只是因为 VS Code 用起来感觉很好,然后我又去寻找其他的能够预览 markdown 的编辑器,看了好多都不是很方便.突然我发现 VS ...

  6. Java面试题总结(一)

    Java面试总结 面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和 ...

  7. 从基层容器类看万变不离其宗的JAVA继承体系

    以容器类为例子,可以观一叶而知秋,看看以前的前辈们是如何处理各种面向对象思想下的继承体系的.读的源代码越多,就越要总结这个继承关系否则读的多也忘得快. 首先摆上一张图片: 看到这张图很多人就慌了,难道 ...

  8. ubuntu中 不同JDK版本之间的切换

    Ubuntu中JDK 的切换前提是同时安装了多个版本,如jdk7和jdk8,若要切换,在终端输入: sudo update-alternatives --config java sudo update ...

  9. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  10. XInitThreads与XLIB

    XInitThreads函数通常需要尽早调用,一般要在XLIB的其他函数前调用 否则XLIB的函数可能会在调用时直接崩溃(多线程程序中) 最好的做法是,在main入口即调用XInitThreads函数