模拟input标签的placeholder效果
程序员文章站
2022-05-31 23:54:05
...
原理
- 使input透明，placeholder内容放在input下面
- 监听input内容变化，控制placeholder内容显示隐藏
兼容性
兼容所有浏览器
效果
chrome下的问题
代码
图片资源
CSS
html,
body { margin: 0; padding: 0; height: 100%; position: relative; left: 0; top: 0;}
body {
font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
-webkit-text-size-adjust:100%;
background-color: #0E2D5F;
}
input { margin:0; padding:0; font-size:100%; }
input:-webkit-autofill {transition: background 5000s ease-in-out 0s;}
input.input-border {outline: 0 none;border: 1px solid #CCCCCC;}
input.input-border:focus {border: 1px solid #81A7F8;}
.hide {display: none;}
.container {
width: 400px;
padding: 40px;
background: #FFFFFF;
}
.login-input-container {
height: 40px;
position: relative;
left: 0;
top: 0;
margin-top: 20px;
margin-right: 42px;
_margin-right: 0;
background-color: #FFFFFF;
}
.login-input-container .login-input-bg-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
overflow: hidden;
}
/* 防止透明的input点击事件穿透 */
.login-input-container .login-input-bg-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #202020;
opacity: 0.01;
filter: Alpha(opacity = 1);
}
.login-input-container .login-input-icon {
display: inline-block;
*display: inline;
*zoom: 1;
width: 40px;
height: 40px;
overflow: hidden;
vertical-align: middle;
}
.login-input-container .login-input-icon.login-input-icon-username {
background: url(login-input-icon.png) 0 0 no-repeat;
}
.login-input-container .login-input-icon.login-input-icon-pwd {
background: url(login-input-icon.png) 0 -40px no-repeat;
}
.login-input-container .login-input-placeholder {
vertical-align: middle;
color: #999999;
font-size: 16px;
}
.login-input-container .login-input-main-container {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.login-input-container .input-login {
background: none;
width: 100%;
height: 38px;
_height: 40px;
padding: 0 0 0 40px;
line-height: 38px;
color: #333333;
font-size: 16px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>PlaceholerTest</title>
<script src="jslib/jquery-1.11.2.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="login-input-container">
<div class="login-input-bg-container"><div class="login-input-icon login-input-icon-username"></div><span class="login-input-placeholder">请输入用户名</span><div class="login-input-bg-mask"></div></div>
<div class="login-input-main-container"><input id="tellerno" class="input-login input-border" type="text" name="tellerno" autocomplete="off"></div>
</div>
<div class="login-input-container">
<div class="login-input-bg-container"><div class="login-input-icon login-input-icon-pwd"></div><span class="login-input-placeholder">请输入密码</span><div class="login-input-bg-mask"></div></div>
<div class="login-input-main-container"><input id="passwd" class="input-login input-border" type="password" autocomplete="new-password"></div>
</div>
</div>
</body>
</html>
JavaScript
function oninput (node, callback){
if(document.addEventListener){
node.addEventListener('input',callback, false);
if(/MSIE 9\.0/.test(window.navigator.userAgent)){
var selectionchange = function(){
callback.call(node);
};
node.addEventListener('focus',function(){
document.addEventListener('selectionchange',selectionchange,false);
},false);
node.addEventListener('blur',function(){
document.removeEventListener('selectionchange',selectionchange,false);
},false);
}
} else {
node.attachEvent('onpropertychange',function(e){
if(e.propertyName === 'value'){
callback.call(node, node);
}
});
}
}
(function () {
var $inputLogin = $('input.input-login');
$.each($inputLogin, function (i, n) {
inputHandle(n);
oninput(n, function () {
inputHandle(n);
});
});
function inputHandle (node) {
if (node.value) {
$(node).closest('.login-input-container').find('.login-input-placeholder').addClass('hide');
} else {
$(node).closest('.login-input-container').find('.login-input-placeholder').removeClass('hide');
}
}
})();
//以下与placeholder效果无关
if (!document.querySelector) { //临时检测浏览器是否支持:focus伪类
$('input.input-border').on('focus', function () {
$(this).css('border', '1px solid #81A7F8');
});
$('input.input-border').on('blur', function () {
$(this).css('border', '1px solid #CCCCCC');
});
}
上一篇： 绵绵的青山脚下花正开