兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性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不能智能提示功能的更多相关文章
- input type类型和input表单属性
一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...
- Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能
第4节 Laravel-通过表单实现新增及操作状态提示功能 4.1 显示新增表单视图 4.2 通过模型实现新增 4.3 操作状态提示 4.1 显示新增表单视图 修改边栏的链接 \resources\v ...
- IE不支持HTML5表单属性placeholder的解决办法
1. [代码][JavaScript]代码 (function ($) { $.fn.placeholder = function (options) { var defaults ...
- js form表单 鼠标移入弹出提示功能
JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...
- HTML表单属性与全局属性
1.全局属性
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器
前言:本项目基于github开源插件实现,该插件使用flash实现,兼容IE8以上浏览器 感谢michalstocki的分享该项目,github项目地址:https://github.com/mich ...
随机推荐
- 使用using释放资源
using关键字 using 关键字可以用来导命名空间,与java中的import类似. 我使用using的地方 using(SqlConnection con=new SplConnection(c ...
- 第8章 文件系统管理(2)_挂载、fdisk分区及分配swap分区
3. fdisk分区 3.1 fdisk命令分区过程 (1)添加新硬盘 (2)查看新硬盘#fdisk –l (3)使用fdisk命令分区:#fdisk /dev/sdb Fdisk交互指令说明 命令 ...
- Google Material Design的图标字体使用教程
使用教程 1. 打开Material icons下载页 2. 选择要下载的图标 (目前不能多选>_<) 3.选择要下载的格式即可 图标字体使用教程 [方法一] STEP 1: 引入字体文件 ...
- AngularJS之开发组件的一些思路
欢迎大家指导与讨论 : ) 一 .前言 由于笔者水平有限,在这里只是分享自己开发组件的一些思路~ 摘要:无UI组件类.有UI组件类.有UI组件类型2.欢迎拍砖吐槽 O(∩_∩)O 二 .无UI组件类 ...
- WebApi2跨域问题
一.跨域问题产生的原因:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能. 现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域 ...
- js 检测页面刷新或关闭
window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }
- Zencart视频教程 Zencart模板制作教程视频 Zencart仿站教程资料
Zen Cart是国外一个免费的.界面友好,开放式源码的购物车软件,是目前外贸行业使用最为广泛的网站程序.本仿站技术需要你有一定的html和css基础,易学易懂,一步一步地教你操作和使用Zen Car ...
- HttpUtility.UrlEncode 和Server.UrlEncode的区别,记录记录,被乱码搞晕头了。。。。。
今天修改原来的站点,有几个session和cookies乱码问题,然后又好好看了一下关于编码这块的内容. 大概是:登录处,用session记录了一点中文内容.然后cookies也记录了一点中文内容,取 ...
- Android BLE 蓝牙编程(一)
最近在研究这个,等我有时间来写吧! 终于在端午节给自己放个假,现在就来说说关于android蓝牙ble的 最近的学习成果吧!! 需要材料(写个简单教程吧--关于小米手环的哦!嘿嘿) Android 手 ...
- 使用gulp-connect实现web服务器
安装插件安装gulp-connect插件,安装命令如下 npm install --save-dev gulp-connect 定义web服务,gulpfile.js代码 var gulp = req ...