当前很多表单提示使用了表单属性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. 第7章 权限管理(3)_文件系统属性和sudo权限

    3. 文件系统属性chattr权限 (1)chattr命令 命令格式: #chattr [+-=][选项] 文件或目录名 +.-.= 分别表示增加权限.删除权限和赋于某种权限 选项 i:主要用来防止对 ...

  2. Spring 事务

    实现购买股票案例: 一.引入JAR文件: 二.开始搭建分层架构---创建账户(Account)和股票(Stock)实体类 Account: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  3. HOLOLENS不适合加天空盒

    加了就有点像VR了,但是视野太窄,所以还是去掉天空盒吧

  4. 嵌入式Linux驱动学习之路(十一)按键驱动-中断机制

    轮询方式: 和led驱动不同的是在配置IO引脚的时候,把LED的输出引脚换成输入,在read函数中向外发送io的状态.必须由应用程序不断的来查询当前IO口的状态来判断. 中断方式: /* file n ...

  5. jQuery ui 框架

    jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ...

  6. Linux 进程间通讯详解七

    上图的一台主机服务器架构的重大缺陷是容易死锁 因为客户端,服务器都往同一消息队列中发送接收消息,假设消息队列已经满了,此时客户端无法向队列中发送消息,阻塞了,而服务器接收完一条消息后,想向消息队列发送 ...

  7. jQuery如何在IE中更改网页标题

    标准上来说,要改变title值要操作document而不是title节点.在IE下不能通过操作title节点来改变document.title. 本来用原生的JavaScript很简单就解决了: do ...

  8. C#基础系列——一场风花雪月的邂逅:接口和抽象类

    前言:最近一个认识的朋友准备转行做编程,看他自己边看视频边学习,挺有干劲的.那天他问我接口和抽象类这两个东西,他说,既然它们如此相像, 我用抽象类就能解决的问题,又整个接口出来干嘛,这不是误导初学者吗 ...

  9. speech recognition resource

    sirius http://sirius.clarity-lab.org/sirius/#install $ tar xzf sirius-1.0.1.tar.gz $ cd sirius/siriu ...

  10. 一行代码解决ie6,7,8,9,10兼容性问题

    "浏览器模式"."文档模式"选项的区别如下: 1."浏览器模式"用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给 ...