WordPress用户登录框密码的隐藏与部分显示技巧
<p><strong>让wordpress登录页的密码框显示最后一个输入的字符</strong><br>
在通常情况下，网页的设计者们会将密码输入框中的所有字符隐藏成黑点，以防止有人在背后偷窥输入的密码，如：</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress用户登录框密码的隐藏与部分显示技巧" alt="WordPress用户登录框密码的隐藏与部分显示技巧" src="https://zhuji.jb51.net/uploads/img/202305/8dcdad67263040fd72a1af2e2d6e3efa.jpg"></p>
<p>
这种密码输入模式虽然减少了被偷窥的危险，但是给我们的密码输入带来了很多麻烦，因为我们不知道到底输入了什么字符，所以经常导致输错密码的情况，浪费了很多时间。</p>
<p>
可能你也已经注意到，现在智能手机的很多应用中，使用了这样一种密码框处理方式：对用户在密码框中输入的最后一个字符，会先让它显示2-3秒钟，然后再隐藏，这样可以让用户知道刚刚输入了什么字符，减少了输错的可能性，同时兼具防偷窥功能。如：</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress用户登录框密码的隐藏与部分显示技巧" alt="WordPress用户登录框密码的隐藏与部分显示技巧" src="https://zhuji.jb51.net/uploads/img/202305/53e1993d70703a8233e5b32e12943b09.jpg"></p>
<p>
今天，我将给大家介绍，在wordpress中如何实现这个的功能，步骤非常简单。</p>
<p>
1、添加js<br>点此下载 需要用到的js，将此js文件放到当前使用主题的根目录下。</p>
<p>
2、添加php代码<br>
用文本编辑器打开当前主题的functions.php，添加以下php代码：</p>
<div>
<div>
<div id="highlighter_776689">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
</td>
<td>
<div>
<div>
<code>function</code> <code>ludou_dpassword() {</code>
</div>
<div>
<code> </code><code>wp_enqueue_script( </code><code>'dpassword'</code><code>, get_template_directory_uri() . </code><code>'/jquery.dpassword.js'</code><code>, </code><code>array</code><code>(), </code><code>'1.0'</code><code>, true );</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'login_enqueue_scripts'</code><code>, </code><code>'ludou_dpassword'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
好了，这个功能就添加成功了，就这么简单。</p>
<p>
补充说明<br>
1、如果你要将js文件放在当前主题的js目录，那你需要将php代码第2行中的 /jquery.dpassword.js 改成 /js/jquery.dpassword.js<br>
2、此功能在输入密码时，只能在最后输入或删除字符，已经被隐藏成黑点的密码中间不能添加或删除字符。</p>
<p>
<br><strong>让wordpress登录框显示/隐藏输入的密码</strong><br>
这可以让用户知道刚刚输入了什么字符，减少了输错密码的可能性，同时兼具防偷窥功能。</p>
<p>
现在，我们还有另外一种选择，直接让用户自行根据需要选择是全部隐藏输入的密码，还是全部显示输入的密码。在全部显示密码框的内容时，用户输错的可能性就大大降低，这也是微软推荐的一种密码框处理方式。效果如下：</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress用户登录框密码的隐藏与部分显示技巧" alt="WordPress用户登录框密码的隐藏与部分显示技巧" src="https://zhuji.jb51.net/uploads/img/202305/8914b5188faa334f91ac0ba6f8e16c70.jpg"></p>
<p>
全部隐藏密码，点击密码框右边的眼睛图标可以显示密码</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress用户登录框密码的隐藏与部分显示技巧" alt="WordPress用户登录框密码的隐藏与部分显示技巧" src="https://zhuji.jb51.net/uploads/img/202305/c9744ae025473f1849ed652a85facfa7.jpg"><br>
全部显示密码，点击密码框右边的锁头图标可以隐藏密码</p>
<p>
</p>
<p>
1、添加js</p>
<p>
点此下载 需要用到的js，将此js文件放到当前使用主题的根目录下。</p>
<p>
2、添加php代码</p>
<div>
<div>
<div id="highlighter_336339">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
</td>
<td>
<div>
<div>
<code>function</code> <code>ludou_prevue() {</code>
</div>
<div>
<code> </code><code>wp_enqueue_script(</code><code>"jquery"</code><code>);</code>
</div>
<div>
<code> </code><code>wp_enqueue_script( </code><code>'prevue'</code><code>, get_template_directory_uri() . </code><code>'/jquery.prevue.min.js'</code><code>, </code><code>array</code><code>(), </code><code>'1.0'</code><code>, true );</code>
</div>
<div>
<code>?></code>
</div>
<div>
<code><style type=</code><code>"text/css"</code><code>></code>
</div>
<div>
<code> </code><code>.prevue-icon-eye:before { content: </code><code>"\f177"</code><code>; }</code>
</div>
<div>
<code> </code><code>.prevue-icon-eye-off:before { content: </code><code>"\f160"</code><code>; }</code>
</div>
<div>
<code></style></code>
</div>
<div>
<code><?php </code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'login_enqueue_scripts'</code><code>, </code><code>'ludou_prevue'</code> <code>);</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
好了，大功造成！</p>
<p>
补充说明</p>
<p>
1、如果你要将js文件放在当前主题的js目录，那你需要将php代码第3行中的 /jquery.prevue.min.js 改成 /js/jquery.prevue.min.js<br>
2、此功能需要1.9.0以上版本的jquery支持。</p>
頁:
[1]