<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>

        PlaceHolder

    </title>

    <style type="text/css">

    /* 设置提示文字颜色 */

    ::-webkit-input-placeholder {

    color: #;

    }

    :-moz-placeholder {

    color: #;

    }

    .placeholder {

    color: #ccc;

    }

    </style>

</head>

<body>

    <input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">

    登录用户名、密码文字提示，鼠标离开显示文字 html5 and jquery<br/>

    <br/>

    账号：<input type="text" name="email" placeholder = '用户账号' /><br/>

    <br/>

    密码：<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/>

</body>

</html>

<script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script>

<script>

//判断浏览器是否支持 placeholder属性

function isPlaceholder(){

    var input = document.createElement('input');

    return 'placeholder' in input;

} 

if(!isPlaceholder()){  //不支持placeholder 用jquery来完成

    $("input").not("input[type='password']").each(function(){//把input绑定事件 排除password框

        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>

placeholder 兼容IE9以下版本 包含pasword的更多相关文章

  1. background兼容IE9以下版本

    .box {    width:100%;    height:80%;        background: url('img/nav_bg.png') no-repeat;    backgrou ...

  2. pc端兼容IE9及以上版本

    最近业务部门反映我们商城的兼容性不是很好,尤其是在IE浏览器上,经过调研,我们决定对IE9及以上版本的IE内核浏览器进行主流程测试,发现有哪些功能在IE9上不兼容 一.CSS兼容性 如下图所示 使用了 ...

  3. IE9以下 placeholder兼容

    //input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...

  4. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

  5. AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  6. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  7. vue拦截器实现统一token，并兼容IE9验证

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...

  8. input placeholder 兼容问题

    placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...

  9. 前端表单提交，提交有图片出现的问题，及解决方案 兼容ie9

    更新一下我的小园子,主要说的是jq文件上传的过程中,如果出现上传的文件里有图片问题 其实文件上传有图片的情况下,不是什么大问题,对于前端来说,但是,如果需要兼容ie9的时候,就需要处理一下 文件上传如 ...

随机推荐

  1. P140、面试题24：二叉搜索树的后序遍历序列

    题目:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则返回true,否则返回false.假设输入的数组的任意两个数字都互不相同. 测试用例: 1)功能测试(输入的后序遍历的序列 ...

  2. Android数据存储（三）——SQLite

    如果需要一个更加健壮的数据存储机制,则需要使用一个关系型数据库,在Android上,则为SQLlite. SQLite的特点:轻量级.嵌入式的.关系型数据库.可移植性好,易使用,小,高效且可靠,与使用 ...

  3. 到底怎么样才叫看书？——Tony Zhao's

    到底怎么样才叫看书?——上篇 目录: 一.引入 二.经历了就能理解 三.读书要分级 四.只读经典 五.别吝惜你动笔的那点时间 一.引入 看到这个题目的时候你可能会感到有点好笑:“这还用问,看书就是把书 ...

  4. poj 3041 Asteroids (二分图的最大匹配 第一题)

    题目:http://poj.org/problem?id=3041 题意:在某个n*n的空间内,分布有一些小行星,某人在里面打炮,放一枪后某一行或某一列的行星就都没了,让求最少的打炮数. 然后把每行x ...

  5. （转载）有关反演和gcd

    tips : 积性函数 F (n) = Π F (piai ) 若F (n), G (n)是积性函数则 F (n) * G (n) Σd | n F (n) 是积性函数 n = Σd | n  φ ( ...

  6. CSS sprites 技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

  7. Springmvc构造RESTful详细讲解

    Rest介绍 /blog/1 HTTP GET => 得到id = 1的blog/blog/1 HTTP DELETE => 删除 id = 1的blog/blog/1 HTTP PUT ...

  8. OK335xS EMMC Partition hacking

    #! /bin/sh # # OK335xS EMMC Partition hacking # 说明: # 本文主要是为了解读同事对EMMC分区的写法,其中有很多写法重复了,但 # 依然尽量保留其作者 ...

  9. 【转】编译Android系统源码和内核源码

    原文网址:http://blog.csdn.net/jiangwei0910410003/article/details/37988637 好长时间没有写blog了,之所以没有写,主要还是工作上的事, ...

  10. MEX文件编写和调试

    作者kaien,2010/02/16 以前我写过一篇文章,详细的介绍过MEX的格式,语法,编译,调试等.可惜记不清放在哪里了.而最近又用到MEX编程,所以只能重新温习一番.时间有限,只记下简要流程和注 ...