WordPress登录框显示/隐藏输入的密码
直接让用户自行根据需要选择是全部隐藏输入的密码,还是全部显示输入的密码。
在全部显示密码框的内容时,用户输错的可能性就大大降低,这也是微软推荐的一种密码框处理方式。效果如下:

今天,我将给大家介绍,在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登录框显示/隐藏输入的密码的更多相关文章
- jquery 实现 <imput>标签 密码框显示/隐藏密码功能
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- checkbox:click事件触发文本框显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Android初级】教你用两行代码实现“显示/隐藏密码”的效果
Android里面要使用密码的场景是非常多的,支付宝.微信.淘宝以及各大银行APP,都跟用户的密码有关.用户的密码是极为隐私的,用户在输入时不希望密码被别人看到,所以几乎所有需要输入密码的场景下都会把 ...
- wordpress登录密码框明文显示最后一个输入的字符
wordpress登录密码框明文显示最后一个输入的字符 (function(a){a.fn.dPassword=function(c){var e={interval:200,duration:100 ...
- EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)
http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接] aski ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
- Android学习笔记之打钩显示输入的密码
利用EditText作为密码输入框是个不错的选择(只需设置输入类型为textPassword即可),保密且无需担心被盗取.但有时用户也不知道自己输入的是否正确,这时就应该提供一个“显示密码”的复选框, ...
- iview 怎样屏蔽掉账户框自动显示账户名和密码(root,***)
用iview框架做出的登录页面,账户名和密码显示框,会自动有占位信息(root,****) 后来解决问题发现,只要在真正的输入框下面添加这样的一行隐藏的代码,占位信息会自动填充到隐藏的input框内, ...
- JS组件系列——显示隐藏密码切换的jQuery插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- 前端之CSS常见兼容性问题
1.双倍浮动BUG: 描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大: 解决方案:给float的元素添加 display:inline ...
- BootStrap的基本使用
bootstrap 现成的css样式,直接调用类作用是快速写出页面又称UI框架Bootstrap中文网LESS是预处理器CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要 ...
- Linux下各文件夹的结构说明及用途介绍(转载)
linux下各文件夹的结构说明及用途介绍: /bin:二进制可执行命令. /dev:设备特殊文件. /etc:系统管理和配置文件. /etc/rc.d:启动的配 置文件和脚本. /home:用户主目录 ...
- div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- jmeter中登录和提交收银出现的错误
登录出现的错误 登录界面如图所示: 为了防止登录跳转的问题response code 302的问题,要设置 2.提交收银界面 当系统设置必须传送jison格式时,要在HTTP Header Manag ...
- Bootstrap 入门到精通
介绍 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.Bootstr ...
- 洛谷 P1996 约瑟夫问题
题目背景 约瑟夫是一个无聊的人!!! 题目描述 n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数,数到m的人再出圈,……依次类推,直到所有的人都出 ...
- Go 1.4 正式版发布,官方正式支持 Android
Go 1.4 正式发布啦,是第五个 Go 的稳定版本,与上一个稳定版本 Go 1.3 相隔 6 个月.Go 1.4 包括一些小的语言改进,支持更多的操作系统和处理器架构:改进了工具链和库.同时,Go ...
- 怎样将英文版的Eclipse转为中文版的?
=====>1.打开eclipse储存文件夹 =====>2.在eclipse文件中找到dropins文件 =====>3.把已经下载好的eclipse汉化包复制到dropins中 ...
- Java使用HtmlUnit抓取js渲染页面
需求: 需要采集js渲染的页面,有些网站的页面是js渲染的 实现: 基于HtmlUnit实现: public static void getAjaxPage() throws Exception{ W ...