jquery html5 实现placeholder 兼容password ie6
<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
登录用户名、密码文字提示,鼠标离开显示文字 html5 and jquery
账号:<input type="text" name="email" placeholder = '用户账号' />
密码:<input type="password" name="password" placeholder = '密码' autocomplete="off" />
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
} if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
}); }
</script>
jquery html5 实现placeholder 兼容password ie6的更多相关文章
- 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...
- IE8 placeholder兼容+Password兼容
对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...
- html5的placeholder属性(IE如何兼容placeholder属性)
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- 【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder
type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的: 在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文 ...
- HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...
- 用jquery实现html5的placeholder功能
html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...
- jQuery实现ie浏览器兼容placeholder效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- RPC跟MQ之间的差异比较
在阿里的平台技术部参与开发了Dubbo(远程调用服务)和Napoli(消息解决方案),又给网站应用支持这2个产品很长一段时间,了解了这2个产品的实现及应用对这两个产品的用法. 大部分情况下,“给定场景 ...
- python异常之ModuleNotFoundError: No module named 'test01inner02'
当我们使用sys.path.append(args) 指令向程序中导入模块时其实本次append操作只是在内存中完成的,如果要永久性的添加需要修改环境变量. 我们发现当我们使用print(sys.pa ...
- 如何解决netty发送消息截断问题
在netty开发过程中我遇到过长的消息被分割成多个小消息的问题.如下图所示: 其实这两条消息应该是一条消息,它们两个才是一个完整的json字符串.查看代码原来是客户端与服务器端都没有考虑TCP粘包 ...
- HDU-1003:Max Sum(优化)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- mac下启动lnmp的方式
mac air 系列由于各种原因使得我不得不重启,重启后发现lnmp全部都关闭了, nginx: sudo nginx php-fpm: sudo php-fpm mysql: cd /usr/l ...
- Tomcat固定的目录结构
1. /work Tomcat把由Jsp生成的Servlet放于此目录下. 2. /webapps 当发布Web应用时,默认情况下把Web应用文件放于此目录下. 3. /logs 存放Tomcat的日 ...
- python学习之列表元组,字典
list:元素性质可以不一致,元素还可以是list,可类似数组方法进行索引(也可以用负数索引,-1表示最后一个),可用.append('')进行动态增加,可用pop()删除最后一个或者pop(i)删除 ...
- 二叉查找树之AVL树
定义平衡树节点: class TreeNode { /** * 树节点的值 */ private int val; /** * 树的高度 */ private int height; /** * 左子 ...
- Nodejs 定时任务
安装扩展:node-schedule npm install node-schedule 1.linux Crontab风格 var schedule = require('node-schedule ...
- CImage访问像素及其像素操作总结
MSDN的代码 COLORREF pixel; int maxY = imgOriginal.GetHeight(), maxX = imgOriginal.GetWidth(); byte r,g, ...