直接让用户自行根据需要选择是全部隐藏输入的密码,还是全部显示输入的密码。

在全部显示密码框的内容时,用户输错的可能性就大大降低,这也是微软推荐的一种密码框处理方式。效果如下:

今天,我将给大家介绍,在WordPress中如何实现这个的功能,步骤非常简单。

1、添加js

点此下载 需要用到的js,将此js文件放到当前使用主题的根目录下。

2、添加php代码

function ludou_prevue() {
wp_enqueue_script("jquery");
wp_enqueue_script( 'prevue', get_template_directory_uri() . '/jquery.prevue.min.js', array(), '1.0', true );
?>
<style type="text/css">
.prevue-icon-eye:before { content: "\f177"; }
.prevue-icon-eye-off:before { content: "\f160"; }
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'ludou_prevue' );
?>

好了,大功造成!

补充说明

1、如果你要将js文件放在当前主题的js目录,那你需要将php代码第3行中的 /jquery.prevue.min.js 改成 /js/jquery.prevue.min.js
2、此功能需要1.9.0以上版本的jQuery支持。

此功能用到了以下jQuery插件:Prevue.js

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/wordpress-login-form-show-hide-password.html

WordPress登录框显示/隐藏输入的密码的更多相关文章

  1. jquery 实现 <imput>标签 密码框显示/隐藏密码功能

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  2. checkbox:click事件触发文本框显示隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【Android初级】教你用两行代码实现“显示/隐藏密码”的效果

    Android里面要使用密码的场景是非常多的,支付宝.微信.淘宝以及各大银行APP,都跟用户的密码有关.用户的密码是极为隐私的,用户在输入时不希望密码被别人看到,所以几乎所有需要输入密码的场景下都会把 ...

  4. wordpress登录密码框明文显示最后一个输入的字符

    wordpress登录密码框明文显示最后一个输入的字符 (function(a){a.fn.dPassword=function(c){var e={interval:200,duration:100 ...

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

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

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

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

  7. Android学习笔记之打钩显示输入的密码

    利用EditText作为密码输入框是个不错的选择(只需设置输入类型为textPassword即可),保密且无需担心被盗取.但有时用户也不知道自己输入的是否正确,这时就应该提供一个“显示密码”的复选框, ...

  8. iview 怎样屏蔽掉账户框自动显示账户名和密码(root,***)

    用iview框架做出的登录页面,账户名和密码显示框,会自动有占位信息(root,****) 后来解决问题发现,只要在真正的输入框下面添加这样的一行隐藏的代码,占位信息会自动填充到隐藏的input框内, ...

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

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

随机推荐

  1. 60分钟课程: 用egg.js实现增删改查,文件上传和restfulApi, webpack react es6 (一)

    今天开始我将写nodejs框架egg.js, react 实现的增删改查,文件上传等常用的b/s场景,这个将分3部分来写. 会让你在60分钟内快速 入口并应用~  你应该用es6, node,或是ph ...

  2. WebService学习之旅(三)JAX-WS与Spring整合发布WebService

    Spring本身就提供了对JAX-WS的支持,有兴趣的读者可以研究下Spring的Spring-WS项目,项目地址: http://docs.spring.io/spring-ws/sites/1.5 ...

  3. 内存泄露,C++

    内存泄露,C++通常是指new出来的内存没有delete掉.在你的代码里边,new了一块内存,然后马上就delete,自然就没有内存泄露了(呃……其实我也不确定啦,因为你用的是delete,而不是de ...

  4. jquery mobile 的手指上下滑动文章、导航栏

    导航栏的js设置 <!--导航栏的滚动 --> <script type="text/javascript"> var myScroll, pullDown ...

  5. Android学习总结(八)———— 广播的最佳实践(实现强制下线功能)

    一.基本概念 强制下线功能功能应该算是比较常见的了,很多应用程序都具备这个功能,比如你的QQ号或者微信号在别处登录了,就会将你强制挤下线.只需要在界面上弹出一个对话框,让用户无法进行任何其他的操作,必 ...

  6. hihoCoder #1080 : 更为复杂的买卖房屋姿势 (线段树,多tag)

    题意: 有编号为0~n的n+1个房屋,给出每个房屋的起始价格,随后给出m种修改,每次修改都要进行输出所有房屋的价格总和.修改有两种方式:(1)政府调控,编号L~R全置为同一价格(0)房屋自行涨跌,编号 ...

  7. HDU 1398 Square Coins 平方硬币 (普通母函数,水)

    题意: 有17种硬币,每种的面值为编号的平方,比如 1,4,9,16.....给出一个数字,求组成这个面值有多少种组法? 思路: 用普通母函数解,主要做的就是模拟乘法,因为硬币是无限的,所以每个构造式 ...

  8. COGS 1427. zwei

    ★☆   输入文件:zwei.in   输出文件:zwei.out   简单对比时间限制:1 s   内存限制:256 MB ‘‘ [样例输入] 5 5 1 2 3 4 5 1 1 3 1 3 5 0 ...

  9. maven打包错误:java.lang.IllegalStateException: Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test

    Tests run: 1, Failures: 0, Errors: 1, Skipped: 0, Time elapsed: 0.118 sec <<< FAILURE! - in ...

  10. Eclipse Java类编辑器里出现乱码的解决方案

    如图:在Java Class编辑器里出现的这种乱码,非常烦人. 解决方案:Windows->Preference->General->Appearance, 在里面将Theme设置成 ...