当前位置: 首页 > 编程笔记 >

WordPress用户登录框密码的隐藏与部分显示技巧

萧和同
2023-03-14
本文向大家介绍WordPress用户登录框密码的隐藏与部分显示技巧,包括了WordPress用户登录框密码的隐藏与部分显示技巧的使用技巧和注意事项,需要的朋友参考一下

让WordPress登录页的密码框显示最后一个输入的字符
在通常情况下,网页的设计者们会将密码输入框中的所有字符隐藏成黑点,以防止有人在背后偷窥输入的密码,如:

这种密码输入模式虽然减少了被偷窥的危险,但是给我们的密码输入带来了很多麻烦,因为我们不知道到底输入了什么字符,所以经常导致输错密码的情况,浪费了很多时间。

可能你也已经注意到,现在智能手机的很多应用中,使用了这样一种密码框处理方式:对用户在密码框中输入的最后一个字符,会先让它显示2-3秒钟,然后再隐藏,这样可以让用户知道刚刚输入了什么字符,减少了输错的可能性,同时兼具防偷窥功能。如:

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

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

2、添加php代码
用文本编辑器打开当前主题的functions.php,添加以下php代码:

function ludou_dPassword() {
  wp_enqueue_script( 'dPassword', get_template_directory_uri() . '/jQuery.dPassword.js', array(), '1.0', true );
}
add_action( 'login_enqueue_scripts', 'ludou_dPassword' );

好了,这个功能就添加成功了,就这么简单。

补充说明
1、如果你要将js文件放在当前主题的js目录,那你需要将php代码第2行中的 /jQuery.dPassword.js 改成 /js/jQuery.dPassword.js
2、此功能在输入密码时,只能在最后输入或删除字符,已经被隐藏成黑点的密码中间不能添加或删除字符。


让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支持。

 类似资料:
  • 有没有办法在另一个程序中隐藏窗口或框架?例如,如果你打开了一个Firefox窗口,并且运行了你的程序,那么它会和firefoxFrame一样。setVisible(false),但很明显,我没有对另一个程序框架的引用。然后也许以后,firefoxFrame。setVisible(真)

  • 我几乎完成了我的一个项目(对我来说,我是一个初学者)。我想隐藏登录链接时,一个角色(管理员或用户)是登录到数据库。我还想显示一个名为“添加等级”的链接,仅当Admin(Manager)登录时。我正在使用spring boot、Tymeleaf、spring security5和h2&JDBC。 总之,我想隐藏或显示基于用户角色的HTML 更新:当我使用 匿名用户 这是我在navbar中包含或不包含

  • 本文向大家介绍angularjs2 ng2 密码隐藏显示的实例代码,包括了angularjs2 ng2 密码隐藏显示的实例代码的使用技巧和注意事项,需要的朋友参考一下 angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text。 如图: 首先,输入框的类型判断; 然后,添加眼睛的

  • 我使用Wordpress与UserPro,并希望我的菜单显示登录用户的名字,链接到用户配置文件页面。 问题是在我的菜单结构中,“Profile”菜单选项应该有一个子菜单,包含“editprofile”、“submit”和“logout”。 这是我当前的代码: 我可以通过摆弄Firebug中的代码来尝试在菜单下添加子菜单,但这意味着手动编辑函数中的所有链接。php,这将是乏味的。 我希望能够通过Wo

  • 问题内容: 因此,我一直在研究密码强度检查器,它的工作方式是用户在文本字段中输入一些随机文本,然后显示即时的视觉反馈(击穿点)。我还添加了一个复选框,选中该复选框时应隐藏密码,即用星号替换所有字符,同时保留用户输入的实际文本。文档侦听器用于跟踪文本字段内的更改。(入场的每个字符都会被分析,然后评分) 因此,我的问题是,如何准确地用星号掩盖用户输入并保留其原始值? GUI如下所示: http://s

  • 问题内容: 您如何在Tkinter中显示和隐藏小部件?我想有一个输入框,但不要一直显示它。有人可以向我展示在tkinter中显示和隐藏条目小部件和其他小部件的功能吗?我希望能够在没有多个帧的情况下执行此操作。 问题答案: 这已经在stackoverflow上得到了回答。简短的答案是,您可以使用grid_remove,如果先前是通过网格添加的,则将导致该小部件被删除。记住小部件的位置,因此只需简单地