<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的更多相关文章

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

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

  2. IE8 placeholder兼容+Password兼容

    对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...

  3. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  4. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  5. 【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder

    type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的: 在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文 ...

  6. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  7. 用jquery实现html5的placeholder功能

    html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...

  8. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 51nod1267(双指针)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1267 题意:中文题诶- 思路:双指针 求a+b+c+d=0,令 ...

  2. 【OpenJ_Bailian - 2795】金银岛(贪心)

    金银岛 Descriptions: 某天KID利用飞行器飞到了一个金银岛上,上面有许多珍贵的金属,KID虽然更喜欢各种宝石的艺术品,可是也不拒绝这样珍贵的金属.但是他只带着一个口袋,口袋至多只能装重量 ...

  3. JQuery Easyui/TopJUI 多表头创建

    JQuery Easyui/TopJUI 多表头创建 废话不多说,直接贴上代码. html <div data-toggle="topjui-layout" data-opt ...

  4. Nginx 405 not allowed最简单快速解决办法

    Apache.IIS.Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误. server { list ...

  5. JSP && Servlet | 错误统一处理

    对404错误和500错误处理: 在WebContent文件下新建404.jsp 和 500.jsp 显示错误时弹出的信息 <%@ page language="java" c ...

  6. IP服务-5-网络时间协议

    NTP版本3(RFC1305)允许IP主机向一个通用的时钟源同步它们的日期和时间. 从设计上来说,大多数路由器和交换机都使用NTP客户端模式,根据NTP服务器所提供的时间来调整自己的时钟.NTP定义了 ...

  7. __enter__,__exit__上下文管理协议

    上下文管理协议__enter__,__exit__ 用途或者说好处: 1.使用with语句的目的就是把代码块放入with中执行,with结束后,自动完成清理工作,无须手动干预 2.在需要管理一些资源比 ...

  8. 2016级萌新选拔赛BE题

    #include<bits/stdc++.h> using namespace std; #define ll long long ll a[]; ll d[]; int main() { ...

  9. python学习之模块:

    每个.py文件就是一个以文件名作为区别的模块,模块化编程便于维护.其它模块要调用某个模块的变量和函数就要用import 模块,然后通过模块.函数.模块.变量来引用. 为防止模块间变量和函数乃至模块名的 ...

  10. myBati初学

    创建数据库(y2165) MyBatis环境搭建1.在pom.xml引入依赖2.得替换build节点,为了让程序编译在main中所有子包下的配置文件3.构建大配置,位于resources<?xm ...