html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏

本文实例为大家分享了js显示隐藏密码输入框值的具体代码，供大家参考，具体内容如下

直接贴上代码

password intput demo

body{

margin:0px;

background-color: white;

font-family: 'PT Sans', Helvetica, Arial, sans-serif;

text-align: center;

color: #A6A6A6;

}

/*输入框样式，去掉背景阴影模仿原生应用的输入框*/

input{

width: 100%;

height: 50px;

border:none;

padding-left:3px;

font-size: 18px;

}

input:focus {

outline: none;

}

/*显示\隐藏密码图片*/

img{

width: 40px;

height: 25px;

position: absolute;

right: 0px;

margin: 15px;

}

/*登录按钮*/

button{

width: 200px;

height: 50px;

margin-top: 25px;

background: #1E90FF;

border-radius: 10px;

border:none;

font-size: 18px;

font-weight: 700;

color: #fff;

}

button:hover {

background: #79A84B;

outline: 0;

}

/*输入框底部半透明横线*/

.input_block {

border-bottom: 1px solid rgba(0,0,0,.1);

}

/*container*/

#page_container{

margin: 50px;

}

// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制

var demoImg = document.getElementById("demo_img");

var demoInput = document.getElementById("demo_input");

//隐藏text block，显示password block

function hideShowPsw(){

if (demoInput.type == "password") {

demoInput.type = "text";

demo_img.src = "invisible.png";

}else {

demoInput.type = "password";

demo_img.src = "visible.png";

}

附上图片：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏相关推荐

原生js实现点击按钮显示/隐藏图片
目录结构: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html js 控制span值,根据显示/隐藏span标签/ Javascript组设置span文本？
下面是一个使"重用"文本与"span-group"同步的示例. Please Select US UK $5.00 25 Pounds It looks lik ...
用原生js完成鼠标点击显示滑入滑出效果
最近用原生js做项目练手,自己尝试做了下,可以直接复制代码看效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta ch ...
js控制html控件显示隐藏和是否可用
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
vue2.0/原生js使用谷歌地图并显示标记点（附两点间路径方法）
图1,谷歌地图初始化并实现显示点信息图2 ,谷歌地图实现两点间路径图3,高德地图实现搜索显示点,可点击地图取点并获取地址,也可以搜索出来具体文章前提使用地图,都是需要获取开发者的key的,去 ...
js点击按钮div显示隐藏
<input type="button" value="隐藏" id="btn"> <div id="box&q ...
原生JS实现点击按钮显示更多内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
js控制div滚动条的显示/隐藏
滚动条显示 document.getElementById("keyCard").style.overflow = "auto"; 滚动条隐藏 document ...
原生js解决表格奇偶列显示
本方案重点在于掌握table的 rows属性和 row的cells属性. 解决的问题: 例子: 奇偶列不同颜色显示个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用 ...

html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏

html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏相关推荐

最新文章

热门文章