js进阶Web APIs01---案例实现

最新推荐文章于 2022-07-26 18:37:41 发布

兰兰的风。。。

最新推荐文章于 2022-07-26 18:37:41 发布

阅读量107

点赞数

分类专栏： # js 文章标签：表单密码的显示与隐藏普通文本框内容的显示与不显示文本框填写规范

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113177419

版权

js 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

1表单密码的显示与隐藏实现

实现效果如下：输入密码后，点击眼睛小图标，实现密码的显示与隐藏
在这里插入图片描述
实现：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            position: relative;
            border-bottom: 1px solid #ccc;
        }
        
        .box img {
            /* 子绝父相：将小图片定位到右边去 */
            position: absolute;
            top: -1px;
            right: 0px;
            width: 24px;
        }
        
        .box input {
            width: 235px;
            border: 0;
            outline: none;
            /* 防止出现外边框 */
        }
    </style>
</head>

<body>
    <div class="box">

        <img src="images/close.png" alt="" id="eye">
        <input type="password" id="pwd">
    </div>
    <script>
        var eye = document.querySelector('#eye');
        var pwd = document.querySelector('#pwd');
        var flag = 0;
        eye.onclick = function() {
            // 第一次点击
            if (flag == 0) {
                pwd.type = 'text';
                this.src = "images/open.png";
                flag = 1;
            } else {
                pwd.type = 'password';
                this.src = "images/close.png";
                flag = 0;
            }

        }
    </script>
</body>

</html>

PS小知识：
元素的隐藏

display:none;//不保留文档流位置
visibity:hidden;//保留文档流位置

2文本框内容的显示与隐藏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        /* border: 1px solid red; */
        width: 200px;
        margin: 100px auto;
    }
    
    .box input {
        width: 190px;
        /* 默认字体颜色：橘红色 */
        color: salmon;
    }
</style>

<body>
    <div class="box">
        <input type="text" value="手机">
    </div>
    <script>
        var input = document.querySelector('input');
        input.onfocus = function() { //得到焦点
            if (this.value == '手机') {
                this.value = '';
            }
            this.style.color = '#000'; //字体颜色变黑

        }
        input.onblur = function() { //失去焦点
            this.style.color = '#ccc'; //字体颜色变灰
            if (this.value !== '手机') {
                this.value = '手机';
            }
        }
    </script>
</body>

</html>

3填写内容规范问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .reg {
        /* border: 1px solid red; */
        width: 600px;
        margin: 100px auto;
    }
    
    .mes {
        /* border: 1px solid pink; */
        display: inline-block;
        font-size: 12px;
        background: url(images/mess.png) no-repeat left center;
        padding-left: 20px;
    }
    
    .wrong {
        color: red;
        background-image: url(images/wrong.png);
    }
    
    .right {
        color: green;
        background-image: url(images/right.png);
    }
</style>

<body>
    <div class="reg">
        <input type="password" name="" id="pwd">
        <p class="mes">请输入6~16位密码</p>
    </div>
    <script>
        var pwd = document.querySelector('#pwd');
        var mes = document.querySelector('.mes');
        //失去焦点事件
        pwd.onblur = function() {
            //根据表单里面值的长度 pwd.value.length
            if (pwd.value.length < 6 || pwd.value.length > 16) {
                // 使用className修改样式（适用于要修改的样式比较多时）
                mes.className = 'mes wrong';
                mes.innerHTML = "您输入的位数不对要求6~16位";
            } else {
                mes.className = 'mes right';
                mes.innerHTML = "您输入正确";
            }
        }
    </script>
</body>

</html>

兰兰的风。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶Web APIs01---案例实现

1表单密码的显示与隐藏实现实现效果如下：输入密码后，点击眼睛小图标，实现密码的显示与隐藏实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C
复制链接

扫一扫

专栏目录