placeholder 效果的实现，input提示字，获取焦点时消失
<!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提示字，获取焦点时消失的更多相关文章
- input提示字在有焦点消失或输入改变时消失
一:获取焦点时 提示字消失 <input type="text" name="textfield" value="这里是提示内容" o ...
- IOS 固定定位底部input输入框，获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...
- a、button、input点击获取焦点时出现蓝色边框，如何去掉
a,button,input{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-write-plain ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失
H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...
- 浅谈实现placeholder效果的几种方案
placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示.高端浏览器支持此属性(ie10/11在获得焦点 ...
- 编辑框添加灰色提示字（html+VC）
Html中添加灰色提示字,使用属性placeholder即可! <input type="text" placeholder="要显示的文字"> 但 ...
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...
随机推荐
- Linux常用基础（三）
1.gcc编译器 (1)简介 前期的GCC是GNU C Compiler,仅仅用于C语言的编译,经过多年的发展,现在的GCC为GNU Compiler Collection,并且目前支持多种编程语言的 ...
- [转帖]Kubernetes的部署策略
Kubernetes的部署策略,你常用哪种? https://www.sohu.com/a/318731931_100159565?spm=smpc.author.fd-d.78.1574127778 ...
- English--动名词
English|动名词 开始动名词的学习,代表着在长难句的征途上又向前迈出了一步. 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识点的描述.力求不含任何的自我感情色彩. 情感:用 ...
- MOOC 数据库笔记（五）：关系演算
关系演算 概述 (这部分的内容大多与离散数学有关,我没有相关基础,所以现在只是简单看一下) 关系演算是以数理逻辑中的谓词演算为基础的. 关系演算是描述关系运算的另一种思维方式. SQL语言是继承了关系 ...
- 《MySQL实战45讲》学习笔记2——MySQL的日志系统
一.日志类型 逻辑日志:存储了逻辑SQL修改语句 物理日志:存储了数据被修改的值 二.binlog 1.定义 binlog 是 MySQL 的逻辑日志,也叫二进制日志.归档日志,由 MySQL Ser ...
- 完美解决SpringMVC中静态资源无法找到（No mapping found for HTTP request with URI）问题
https://blog.csdn.net/kingmax54212008/article/details/79330308 今天遇到一个比较新奇的问题,但是也应该是使用spring MVC框架时由于 ...
- 【WPF】2、美化控件
控件有默认样式,但是有时候默认样式并不够用,就需要美化. 1.常用的方法是美术出图,直接贴图进去,效果又好又简单(对程序来说). 用图片有三种方式:设置控件背景图片.设置控件内容为图片和直接使用图片做 ...
- （原创）MODBUS-TCP协议分析
- 一.B/S架构和C/S架构
1.B/S架构 Browser-Server, 浏览器和服务器架构.包含客户端浏览器.web应用服务器.数据库服务器的软件系统.用户只需要一个浏览器就可以访问服务.系统更新的时候,只需要更新服务端, ...
- CodeForces 955D Scissors
昨晚CF比赛比较颓,今天有心情写题解就不错了QWQ 洛谷题目页面传送门 & CodeForces题目页面传送门 给定字符串\(a,b,|a|=n,|b|=m\),求是否可以在\(a\)中选\( ...