<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder 效果的实现</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<style>
body {
        font-size: 12px;
}

div {
        position: relative;
}

.userName-group,
.pswd-group{
        width: 153px;
        height: 24px;
        margin-bottom:10px;
}

label{
        margin-left:3px;
        line-height: 24px;
        z-index: 1;
        color: #999;
}
.userName-group input,
.pswd-group input{
        position: absolute;
        top: 0;
        left:0;
        width: 153px;
        height:22px;
        border:1px solid #bbb;
        z-index: 999;
        background-color: transparent;
}
</style>
<body>
<h1>placeholder 效果</h1>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">

<h1>placeholder 效果的实现</h1>

<div class="userName-group">
    <label for="username">用户名</label>
    <input type="text" id="username">
</div>
<div class="pswd-group">
    <label for="password">密码</label>
    <input type="password" id="password">
</div>
<script>

/*$(function(){        
        var input=$("input"),
                len=input.length;
        for(var i=0;i<len;i++){//判断浏览器是否记住信息
                var val=input.eq(i).val();
                if(val!==''){
                        input.eq(i).prev('label').hide();
                }
        }
        $("label").click(function(){
                $(this).next().focus();
        })        
        $("#username,#password").keydown(function(){
                $(this).prev().hide();
        }).blur(function(){
                var _this=$(this);
                if (_this.val() == ''){
                        _this.prev().show();
                }
        });
})*/

//判断浏览器
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject){
        Sys.ie = ua.match(/msie ([\d.]+)/)[1];
}
//else if (document.getBoxObjectFor){
//        Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
//}else if (window.MessageEvent && !document.getBoxObjectFor){
//        Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
//}else if (window.opera){
//        Sys.opera = ua.match(/opera.([\d.]+)/)[1];
//}else if (window.openDatabase){
//        Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//}

window.onload=function(){        
        var        input=document.getElementsByTagName('input'),
                label=document.getElementsByTagName('label'),
                username=document.getElementById('username'),
                pwd=document.getElementById('password'),
                len=input.length;
                
        for(var i=0;i<len;i++){
                var val=input.item(i).value,
                        div=input.item(i).parentNode;
                if(val!==''){
                        label_s_h(div,'none');
                }
        }
        label.onclick=function(){
                this.nextSibling('input').focus;        
        }

        username.onkeydown=pwd.onkeydown=function(){
                var div=this.parentNode;
                        label_s_h(div,'none');
        }
        username.onblur=pwd.onblur=function(){
                var _this=this,
                        div=this.parentNode,
                        val=_this.value;
                if(val==''){
                        label_s_h(div,'block');
                }
        }
}
s=Sys.ie||'';//没有空s为undefined
function label_s_h(o,d){
        /*if(s=='6.0'||s=='7.0'||s=='8.0'){
                //s.indexOf('6'||'7'||'8')>0不知道为什么这样不对 ？？
                //s=='6.0'||'7.0'||'8.0' 写在label_s_h()函数里判断就出错，chrome下也执行到这里，不写在函数里是对的
                o.firstChild.style.display=d;//不知道为什么不能用.previousSibling ？？
                
        }else{
                o.childNodes[1].style.display=d;//不知道为什么ie9以上和chrome不支持firstChild ？？？
        }*/
        s=='6.0'||s=='7.0'||s=='8.0'?o.firstChild.style.display=d:o.childNodes[1].style.display=d;
}

</script>
</body>
</html>

placeholder 效果的实现，input提示字，获取焦点时消失的更多相关文章

  1. input提示字在有焦点消失或输入改变时消失

    一:获取焦点时 提示字消失 <input type="text" name="textfield" value="这里是提示内容" o ...

  2. IOS 固定定位底部input输入框，获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  3. a、button、input点击获取焦点时出现蓝色边框，如何去掉

    a,button,input{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-write-plain ...

  4. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  5. HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失

    H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...

  6. 浅谈实现placeholder效果的几种方案

    placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示.高端浏览器支持此属性(ie10/11在获得焦点 ...

  7. 编辑框添加灰色提示字（html+VC）

    Html中添加灰色提示字,使用属性placeholder即可! <input type="text" placeholder="要显示的文字"> 但 ...

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

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

  9. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

随机推荐

  1. JMeter扩展插件实现对自定义协议进行支持 转

    本文版权归xmeter.net 所有.欢迎转载,转载请注明出处. 摘要## JMeter本身提供了插件机制,允许第三方扩展JMeter以支持JMeter不支持的协议的测试.本文以扩展一个简单的Apac ...

  2. 《C++ 习题与解析》笔记

    目录 ####Chapter-1 C++语言概述(错题) ####Chapter-2 类和对象 ####Chapter-3 引用 ####Chapter-4 友元函数 #### Chapter-5 运 ...

  3. matlab利用m_map工具包画中国地图及散点云图

    开始之前需要准备好malab,中国地图shp文件,m_map工具包. 中国地图shp文件可以在下面的链接中下载: https://gadm.org/download_country_v3.html 本 ...

  4. Codeforces Round #588 (Div. 1)

    Contest Page 因为一些特殊的原因所以更得不是很及时-- A sol 不难发现当某个人diss其他所有人的时候就一定要被删掉. 维护一下每个人会diss多少个人,当diss的人数等于剩余人数 ...

  5. Elastic Stack 7.5.0白金版永不过期

    适用版本:7.4.0~7.5.0 警告:本文章仅限于学习,非商业用途. 目录结构 # 先创建相关目录,具体结构如下: /opt |-- bulid # 编译目录 | |- src |-- instal ...

  6. 菜刀连接一句话木马出现：`Cannot call assert() with string argument dynamically`错误

    前言 逆天还是上学那会玩渗透的,后来工作后就再也没碰了,所以用的工具还是以前经典款,这不,发现出问题了 问题 如果是PHP5则没有问题,如果是PHP7,会出现:Cannot call assert() ...

  7. CSAPP第二章show_bytes函数的探究

    CSAPP第二章中给出了一个帮助我们观察数据的位模式的函数--show_bytes函数,具体实现如下: #include<stdio.h> typedef unsigned char *b ...

  8. 树莓派4B安装Raspbian系统及配置

    2019/11/11, 树莓派4B, Raspbian Buster 摘要:给树莓派4B安装系统及基础配置 树莓派实验室参考文档 准备工具 树莓派4B硬件 SD卡格式化工具 SD Formatter ...

  9. python中字典的建立

    一.字典由键key与值value构成. 如: a={'d':6,'f':'va'}print(a['f']) 上面代码简单建立字典,其中需要访问字典需要输入键值. 二.又比如需要在某个关键字中添加数据 ...

  10. Java之路---Day18(List集合)

    2019-11-05-23:03:28 List集合: java.util.List 接口继承自 Collection 接口,是单列集合的一个重要分支,习惯性地会将实现了List 接口的对象称为Lis ...