当前位置：网站首页>实际开发中，客户要求密码输入框禁止粘贴~

实际开发中，客户要求密码输入框禁止粘贴~

2022-08-04 05:26:00 【愿为浪漫渡此劫】

实际开发中的需求及解决

在做单点登录时，前端会给后端login.html静态页面，部署单点登录页面

此时，客户在使用登录页面时，突然提出新需求： 密码输入框禁止粘贴,
具体实现，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        html,
        body {
    
            width: 100%;
            height: 100%;
        }
        button,
        input {
    
            border: none;
            outline: none;
        }
        .loginView {
    
            width: 100%;
            height: 100%;
            background: url('./public.jpg') no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .login-container {
    
            position: absolute;
            right: 12%;
            width: 10.75rem;
            height: 11.5rem;
            border: 1px solid #FFFFFF;
            box-sizing: border-box;
            border-radius: 3px;
            top: 34%;
        }
        .login-title {
    
            width: 7.1181rem;
            text-align: center;
            padding-bottom: 5px;
            border-bottom: 3px solid rgba(245, 245, 245, 0.6);
            margin: 1rem auto 0.6875rem;
            font-size: 0.8125rem;
            color: #FFFFFF;
        }
        .form-box {
    
            width: 100%;
            
        }
        .item {
    
            width: 10.75rem;
            padding: 0 10px;
        }
        .item input {
    
            width: 145px;
            height: 25px;
            background-color: transparent;
            border: 0.834952px solid #FFFFFF;
            box-sizing: border-box;
            border-radius: 1.6699px;
            padding-left: 0.75rem;
            outline: none;
            font-size: 0.625rem;
        }
        .item .form-tip {
    
            font-size: 0.625rem;
            line-height: 0.8125rem;
            color: #E3E4E6;
            margin-bottom: 0.146875rem;
        }
        .login-btn {
    
            cursor: pointer;
            width: 9.08rem;
            margin: 8px auto auto;
            height: 1.6344rem;
            background: #4473ea;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: 0.6347rem;
            font-family: 'Microsoft YaHei UI';
        }
    </style>
</head>
<body>
    <div class="loginView">
        // 单点登录页面
        <div class="login-container">
            <div class="login-title">用户登录</div>
            <form class="form-box" action="/login" method="post">
                <div class="item">
                    <label for="username" class="form-tip">账号</label>
                    <input name="username" id="username" type="text" >
                </div>
                <div class="item">
                    <label for="pwd" class="form-tip">密码</label>
                    <input id="pwd" name="password" type="password" >
                </div>
                <button type="submit" class="login-btn">登录</button>
            </form>
        </div>
    </div>
</body>
<script>
    const pwd = document.querySelector('#pwd');
    pwd.addEventListener("paste", function(e){
    
      e.preventDefault()
      console.log('糟糕，现在你无法复制粘贴，必须得手动编写和输入所有的内容了')
    })
</script>
</html>
原网站

版权声明
本文为[愿为浪漫渡此劫]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44224921/article/details/124727115

边栏推荐

猜你喜欢

随机推荐