<!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>
相关文章：
- 点击 input 框，框内提示消失效果 - Prolove 2021-12-04
- 设计input搜索框提示文字点击消失的效果 2021-12-15
- Vue Input 失去焦点 @blur事件 & 获得焦点 ref 实时 实时获取input输入值 2021-11-30
- JS控制密码框获取焦点时文字消失，失去焦点时文字出现 2022-12-23
- 文本框中有默认的文字，写获取焦点和失去焦点的文字显示与消失的效果 2021-08-16
- react input 获取/失去焦点 2022-12-23
- 原生js实现placeholder 当获取焦点时清空，失去焦点且为空时恢复 2022-12-23
- 【input】 失去焦点时 显示默认值 focus blur label placeholder 【input提示自动消失】★★★★★★★★ 2022-12-23