今天讲述的是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. Quartz.Net—基本操作

    Quratz基本架构 Scheduler基本操作 /// <summary> /// 调度器信息 /// </summary> /// <returns></ ...

  2. SpringBoot之分页插件PageHelper的使用

    在springboot中使用PageHelper插件有两种较为相似的方式,接下来我就将这两种方式进行总结. 方式一:使用原生的PageHelper 1.在pom.xml中引入依赖 <depend ...

  3. Python31之类和对象1(三大特征:多封继——多疯子)

    一.对象: Python即是面向对象的编程也是面向过程的编程语言,其内部可谓是无处不对象,我们所熟知的列表,字符串等工厂函数本质上都是对象.对象其实是对属性和方法的封装. 属性是对象的静态特征 方法是 ...

  4. Arm-Linux 移植 jpeg库

    背景: jpeg库的使用可以提高显示效率. host平台 :Ubuntu 16.04 arm平台 : S5P6818   jpeg    :v9c arm-gcc :4.8.1 主机准备: 运行以下脚 ...

  5. Lambda 表达式动态拼接.

    背景: 项目使用EF 查询时需要手动判断条件写.觉得太麻烦就Google 如何动态生成Linq.最后找到了 System.Linq.Dynamic.Core. 这个东西. Scott Guthrie ...

  6. EfCore基本用法

    db first 和 code first的基本使用方法 https://www.cnblogs.com/Starts_2000/p/mysql-efcore20-codefirst-dbfirst- ...

  7. copy 合并

    copy /b xxx.jpg + yyy.txt zzz.jpg /b 二进制 /a 文本

  8. google mock C++单元测试框架

    转:google mock C++单元测试框架 2012-03-12 09:33:59 http://blog.chinaunix.net/uid-25748718-id-3129590.html G ...

  9. Linux Wireless Supported Devices

    Linux Wireless Supported Devices https://ark.intel.com/content/www/us/en/ark/products/series/59484/i ...

  10. [转载]Python 包管理工具

    [转载]Python 包管理工具 最近由于机缘巧合,使用各种方法安装了一些Python包,所以对Python的包管理开始感兴趣.在网上找到一篇很好的文章:https://blog.zengrong.n ...