欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

模拟input标签的placeholder效果

程序员文章站 2022-05-31 23:54:05
...

原理

  1. 使input透明,placeholder内容放在input下面
  2. 监听input内容变化,控制placeholder内容显示隐藏

兼容性

兼容所有浏览器

效果

模拟input标签的placeholder效果
模拟input标签的placeholder效果

模拟input标签的placeholder效果
chrome下的问题
模拟input标签的placeholder效果

代码

图片资源

模拟input标签的placeholder效果

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');
        });
    }