对于placeholder兼容问题 IE系列的大部分不兼容

使用JQ插件解决这个问题,确实用法很简单

jS下载地址http://www.ijquery.cn/js/jquery.placeholder.min.js

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.placeholder.min.js"></script>
<script type="text/javascript">
$(function(){ $('input, textarea').placeholder(); });
</script>

后续,placeholder引发的一系列问题

谨慎:早期的placeholder.min.js可能对Password输入框不支持,

很多人都困惑对Password的解决办法,下面分享一些利用placeholder.min.js+validate.js的一套验证demo

  <script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/Jquery.validate.expand.js"></script>
<script src="~/Scripts/jquery.placeholder.min.js"></script>
 $("#Form").validate({
ignore: "",
rules: {
Name: { required: true, rangelength: [4, 20],chrnum: true,CheckUserName:true },
Password: { required: true, rangelength: [4,20] },
Newpassword: { equalTo: '#Password',rangelength: [4,20] },
Mobile: { required: true,rangelength: [5, 15],digits:true,CheckPhone:true },
check: { required: true}
},
messages: {
Name: { required: "账号名称不能为空", rangelength: "请输入4-20个字母、数字组合",chrnum:"请输入4-20个字母、数字组合",CheckUserName:"该账号已被注册" },
Password: { required: "密码不能为空", rangelength: "请输入4-20个字" },
Newpassword: { equalTo: "两次密码输入不一致",rangelength: "请输入4-20个字" },
Mobile: { required: "请输入联系电话",rangelength:"请输入5-15个字",digits:"请输入有效数字",CheckPhone:"该联系号码已被使用" },
check: {required:"请选择复选框"}
},
//对radio或checkbox的扩展
errorPlacement: function (error, element) { //指定错误信息位置
if (element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) {
//ajax请求后台数据
}
})

IE8 placeholder兼容+Password兼容的更多相关文章

  1. 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

    @{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...

  2. jquery html5 实现placeholder 兼容password ie6

    <style type="text/css"> /* 设置提示文字颜色 */ ::-webkit-input-placeholder { color: #838383; ...

  3. 强制将IE8设置为IE7兼容模式来解析网页

    强制将IE8设置为IE7兼容模式来解析网页 英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx 文件兼容性用于定义让IE ...

  4. UI设计文本框解决Placeholder的在IE10 以下 IE 9 IE8 IE 7 的兼容问题

    创建JS文件 placeholderfriend.js (function($) { /** * 牛叉的解决方案 */ var placeholderfriend = { focus: functio ...

  5. ie8中遇到的兼容问题以及解决方案

    一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性) -webkit-box-shadow: 0 1px 5px #ff2826; -webkit-border-rad ...

  6. input输入框的border-radius属性在IE8下的完美兼容

    在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radi ...

  7. ie8中支持 password 的 placeholder

    之前写过一篇 ie8中使用placeholder 的博客,但是,该文中的 placeholder 在 type="password" 时会出现问题,不能显示文字而是密码类型的点,所 ...

  8. IE8一枝独秀的JS兼容BUG

    // 例如淡入淡出的封装类文件 function ImagesEff(div,time){ this.arr=[];//装载所有div this.time=time; this.recordOld=n ...

  9. placeholder各种浏览器兼容问题

    只要在页面上引入placeholder.min文件,再以$('input,textarea').placeholder(); 就可以兼容ie等各种浏览器. placeholder.min.js文件链接 ...

随机推荐

  1. Zephyr-MQTT

    Zephyr OS 支持MQTT协议,其源码目录在: # cd /zephyr-/samples/net/paho_mqtt_clients/publisher/ # cd /zephyr-1.5.0 ...

  2. Zephyr-开发流程

    开发流程 前提1:检查你的Linux主机满足入门指南中规定的最低要求. 具体请参考 :  物联网操作系统-Zephyr 前提2: 确保SDK的环境变量和zephyr项目的环境变量. 终端执行: $ e ...

  3. 性能相差极大的SQL语句

    等价的SQL,性能差异极大,数据库里设计了一个字段存储日期时间,但不是datetime类型,用了时间戳(int 11), 下面有2个SQL语句用于查询数据库,一个是把时间戳转成date进行查询,一个是 ...

  4. BZOJ 1035 Risk

    Description 经过连续若干年的推广,Risk这个游戏已经风靡全国,成为大众喜闻乐见的重要娱乐方式.Risk这个游戏可以理解为一种简易的策略游戏,游戏者的目的是占领所有的土地.由于游戏规则的规 ...

  5. BZOJ 1033 杀蚂蚁

    Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的任 ...

  6. SequoiaDB 架构指南

    1 简介 SequoiaDB(巨杉数据库)是一款分布式非关系型文档数据库,可以被用来存取海量非关系型的数据,其底层主要基于分布式,高可用,高性能与动态数据类型设计,与当前主流分布式计算框架 Hadoo ...

  7. Qt 文件处理(readLine可以读取char[],并且有qSetFieldWidth qSetPadChar 等全局函数)

    Qt 文件处理 Qt提供了QFile类来进行文件处理,为了更方便地处理文本文件或二进制文件,Qt还提了QTextStream类和QDataStream类,处理临时文件可以使用QTemporaryFil ...

  8. 揪出“凶手”——实战WinDbg分析电脑蓝屏原因

    http://www.appinn.com/blue-screen-search-code/ 蓝屏代码查询器 – 找出蓝屏的元凶 11 文章标签: windows / 系统 / 蓝屏. 蓝屏代码查询器 ...

  9. CSS中的高度

    https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight Element.clientHeight是只读属性,以像素为 ...

  10. struts2 Convention插件零配置,使用注解开发

    从struts21开始,struts2不再推荐使用codebehind作为零配置插件,而是改用Convention插件来支持零配置.与以前相比较,Convention插件更彻底. 使用Conventi ...