今天讲述的是html5中input的password密码的加密与显示

都知道input标签加上password输入密码显示的都是原点.......怎么点一个按钮让他显示回来明文数字1234567

上代码(使用时引入jquery)

<form >
<input type="password" name="password" id="password" onblur="passwordBlur()"/>
<input type="text" id="text" style="display:none" onblur="textBlur()"/>
<input type="checkbox" onclick="xyPassword()"/>显示密码
<input type="submit" value="提交"/>
</form>

<script>
//点击多选框切换text和password的隐藏和显示
function xyPassword() {
$("#text").toggle();
$("#password").toggle();
}
//text框失去焦点把text框的值赋值给password框
function textBlur() {
$("#password").val($("#text").val());
}

//password框失去焦点把password框的值赋值给text框
function passwordBlur() {
$("#text").val($("#password").val());
}
</script>

jquery显示隐藏密码跟显示密码的更多相关文章

  1. EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  2. vue评论显示隐藏,JavaScript显示关闭

    <template> <div id="vue_det"> <h1>{{details()}}</h1> <div>{{ ...

  3. VisionPro显示隐藏搜索区域

    假如我们需要显示两张图,一张显示CogPMAlignTool工具不带搜索区域的,一张显示CogPMAlignTool工具带搜索区域的图像 VisionPro显示隐藏搜索区域 VisionPro显示隐藏 ...

  4. JS组件系列——显示隐藏密码切换的jQuery插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  6. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...

  7. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  8. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  9. input 显示/隐藏密码

    js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...

  10. vue+element-ui实现显示隐藏密码

    <template> <el-form :model="cuser_info" label-width="115px" label-posit ...

随机推荐

  1. shrio学习笔记

    Thymeleaf扩展坐标 <!--thyemleaf对shrio的扩展坐标--> <dependency> <groupId>com.github.thebora ...

  2. win10安装Ubuntu,用Xshell连接

    一.安装Ubuntu 安装Ubuntu,安装过程就不详细说了,我是从微软商店下载的Ubuntu安装,没有用VMware,想用Xshell连接Ubuntu,中间一直出问题,现在解决,总结一下. 二.配置 ...

  3. SQL——SELECT(查)

    一.SELECT语句的基本用法 SELECT语句会在数据库中选取数据,存放在一个结果表中. SELECT 语法: SELECT 列名1,列名2... FROM 表名: 先看一下student表: 1. ...

  4. hadoop 空间配置

    hadoop-------------- 分布式计算框架. common // hdfs //存储 mapreduce //MR,编程模型. yarn //资源调度. 集群部署----------- ...

  5. Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

    需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些.     其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...

  6. 编译内核提示mkimage command not found – U-Boot images will not be built

     转載與:http://www.mr-wu.cn/u-boot-tools-binary-package-in-ubuntu/ ubuntu 编译linux kernel时提示: “mkimage” ...

  7. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

  8. 微信小程序自定义组件——接受外部传入的样式类

    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html 外部样式类 有时, ...

  9. java 爬虫:开源java爬虫 swing工具 Imgraber

    1实现点: 1.返回给定URL网页内,所有图像url list 2.返回给定URL网页内,自动生成图像文件路径.txt 文件 3.返回给定URL网页内,下载txt文件指定的图片url,并将所有图像保存 ...

  10. vue实现组件切换的两种方式

    <!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset=&q ...