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> ...
随机推荐
- Mol Cell Proteomics. |廖文丽| 阿尔兹海默症临床前期的脑脊液中突触蛋白的变化先于神经变性标志物
大家好,本周分享的是发表在Molecular & Cellular Proteomics. 上的一篇关于阿尔兹海默病临床前期生物标志物鉴定的文章,题目是Changes in synaptic ...
- ubuntu 14 安装XML::Simple 模块
最近需要用到perl 来解析xml 文件,从网上搜索了一下,大部分都建议使用XML::Simple 模块来解析,这里记录一下安装过程 方法一: 直接使用CPAN 来安装模块 $ perl -MCPAN ...
- C#邮包计费
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- D. Merge Equals(from Educational Codeforces Round 42 (Rated for Div. 2))
模拟题,运用强大的stl. #include <iostream> #include <map> #include <algorithm> #include < ...
- foreach循环报NPE空指针异常
前言 最近debug时忽然发现,如果一个集合赋值为null,那么对该集合进行foreach循环(也叫增强for循环)时,会报NPE(即空指针异常NullPointerException). 代码如下: ...
- android 通知(android 8.0可用)
final String CHANNEL_ID = "com.chao.channel.id"; final String CHANNEL_NAME = "com.c ...
- OSPF-1-OSPF的数据库交换(1)
一.OSPF路由器ID(RID) 选举过程: 1.使用router-id id 命令中配置的路由器ID 2.up着的环回接口最大的ip 3.up着的非环回接口最大ip 如果路由器的RID发生了变化 ...
- Oracle 修改密码(忘记登录密码,用户System)
1.修改计算机环境变量,把oracle服务端路径放在最前面 2.输入cmd 3.输入命令:sysplus /nolog SQL>conn sys/syspwd as sysdba SQL> ...
- go查询mysql到list<map>
func selects() { db, err := sql.Open("mysql", "root:root@tcp(127.0.0.1:3306)/test?cha ...
- 微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置 微信公众号 ...