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> ...
随机推荐
- 常用SQL语句写法(一)
<resultMap id="userResult" type="com.cloudwalk.shark.model.User"> <id p ...
- Codeforces 1138B(列方程枚举)
构造模拟要分情况讨论感觉不是够本质,然后官解是因为只有四个量所以可以根据限制条件列两个方程,再枚举一下解就可以了. const int maxn = 5000 + 5; int n, c[maxn], ...
- bryce1010专题训练——CDQ分治
Bryce1010模板 CDQ分治 1.与普通分治的区别 普通分治中,每一个子问题只解决它本身(可以说是封闭的) 分治中,对于划分出来的两个子问题,前一个子问题用来解决后一个子问题而不是它本身 2.试 ...
- 洛谷 P2260 [清华集训2012]模积和 || bzoj2956
https://www.lydsy.com/JudgeOnline/problem.php?id=2956 https://www.luogu.org/problemnew/show/P2260 暴力 ...
- 子shell
http://bbs.csdn.net/topics/392292455 https://www.cnblogs.com/daniaoge/p/6161821.html http://blog.csd ...
- 转 SecureCRT中文乱码解决方法
1. 打开对话窗口,在工具栏中点开“选项”,选择“会话选项”. 2. 在打开的“会话选项”中,选择“外观”. 3. 在显示的“窗口和文本外观”中找到“字符编码”. 4. 把“字符编码”设置为“U ...
- 死磕 java并发包之AtomicStampedReference源码分析(ABA问题详解)
问题 (1)什么是ABA? (2)ABA的危害? (3)ABA的解决方法? (4)AtomicStampedReference是什么? (5)AtomicStampedReference是怎么解决AB ...
- CSS选择器手册
CSS选择器手册 选择器 选择器名称 例子 例子描述 CSS E.class 类选择器 E.intro 选择 class="intro" 的所有E元素. ...
- map中使用await 异步函数
let result=await Promise.all(dataComments.map(async (ele)=>{ return (async ()=>{ let resData= ...
- 《深入理解JavaScript闭包和原型》笔记
By XFE-堪玉 以下知识来源于对王福朋所写<深入理解javascript原型和闭包>的理解和整理 一切都是对象[引用类型],对象都是通过函数创建的[Funcion类型] 对象是属性的集 ...