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

前端之家收集整理的这篇文章主要介绍了原生js实现密码输入框值的显示隐藏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

直接贴上代码

password intput demo

<div id="page_container">

<div class="input_block">
<img id="demo_img" onclick="hideShowPsw()" src="visible.png">
<input type="password" id="demo_input" placeholder="Password"/>

<button onclick="">Login

<script type="text/javascript">
// 这里使用最原始的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";
}
}

附上图片

这里写图片描述

这里写图片描述

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

猜你在找的JavaScript相关文章