原生射流研究…实现密码输入框值的显示隐藏
本文实例为大家分享了射流研究…显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下
直接贴上代码
!DOCTYPE html html标题密码int put demo/title/head style type=' text/CSS ' body { margin :0 px;背景-颜色:白色;字体系列: 'PT Sans ',Helvetica,阿里亚尔,无衬线;文本对齐:中心;color: # A6A6A6}/*输入框样式,去掉背景阴影模仿原生应用的输入框*/input { width : 100%;高度: 50pxborder:none左填充:3 pxfont-size : 18px}输入:焦点{轮廓:无;}/*显示\隐藏密码图片*/img { width : 40px;高度: 25px绝对位置:right : 0pxmargin : 15px }/*登录按钮*/button { width : 200 px;高度: 50px边距-top : 25px;背景# 1e 90 ffborder-半径: 10pxborder : none font-size : 18px;字体粗细: 700;color: # fff}按钮:悬停{背景: # 79a 84b轮廓: 0;}/*输入框底部半透明横线*/.input _ block { border-bottom : 1px实心rgba(0,0,0,1);}/* container */# page _ container { margin : 50px;}/style body div id=' page _ container '!-密码输入框-div class=' input _ block ' img id=' demo _ img ' onclick=' hideshopsw()' src=' http : visible。巴布亚新几内亚输入类型='password' id='demo_input '占位符='密码'/div按钮onclick='登录/按钮/div脚本类型='文本/JavaScript '//这里使用最原始的射流研究…语法实现,可对应换成jquery语法进行逻辑控制var演示img=文档。getelementbyid(' demo _ img ');var演示输入=文档。getelementbyid(' demo _ input ');//隐藏文本块,显示密码块函数hideShowPsw(){ if(DeMoinput。type==' password '){ DeMoinput。type=' text演示_ img。src='不可见。png ';} else { DeMoinput。type=' password演示_ img。src='可见。png ';} }/脚本/正文/html附上图片:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:原生射流研究…实现密码输入框值的显示隐藏是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。