仿京东显示隐藏密码明文学习(javascript)

最新推荐文章于 2023-07-15 23:29:14 发布

半浮名

最新推荐文章于 2023-07-15 23:29:14 发布

阅读量335

点赞数 2

分类专栏：笔记 JavaScript核心教程文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_51813155/article/details/120803139

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

JavaScript核心教程

4 篇文章 0 订阅

订阅专栏

仿京东显示隐藏密码明文学习

- 要熟悉input type类型

思考:
做一个点击按钮，显示文本，再点击隐藏文本, 以小点为隐藏
输入框，按钮
输入框：操作

要熟悉input type类型

Inpurt操作:知识点

<input type="password">

type=“password”
输入时,隐藏文本，密码形式，以小圆点代替输入的文本

<input type="text">

输入时,显示文本内容

js实现算法 :
一点击如果：当flag=0，显示文本，然后flag+1，再点击时：因为flag=1，执行密码类型，使flag=0，这样，第一次，第二次，等等，效果出来了
一点击就改变文本类型

input.type="text";

js代码如下:

 <script>

var input=document.querySelector('input');
var forr=document.querySelector('.forr');

console.dir(forr);
var flag=0;




forr.onclick=function(){

if(flag==0) {
input.type="text";


flag=1;




}

else {

input.type="password";
flag=0;

}

}
    </script>

html和css代码如下:


    .forr{
    position: absolute;
    top: 8px;
    left: 170px;
    width: 30px;
    height: 25px;
    background-color: pink;
    
    
    }
    
    input{
    
    width: 190px;
    
    }
    
    </style>
    
    
    
    
    
    
    <body>
        
    
    
    
    
    
    <input type="password"> 
    <div class="forr">   </div>

效果图:
在这里插入图片描述

点击后:
在这里插入图片描述

半浮名

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
仿京东显示隐藏密码明文学习(javascript)

仿京东显示隐藏密码明文学习要熟悉input type类型思考:做一个点击按钮，显示文本，再点击隐藏文本, 以小点为隐藏输入框，按钮输入框：操作要熟悉input type类型Inpurt操作:知识点<input type="password"> type=“password”输入时,隐藏文本，密码形式，以小圆点代替输入的文本<input type="text"> 输入时,显示文本内容js实现算法 :一点击如果：当flag=0，显示文本，然后flag+1，再
复制链接

扫一扫