首頁 後端開發 php教程 WordPress用户登录框密码的隐藏与部分显示技巧_php技巧

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

May 16, 2016 pm 08:01 PM
wordpress 密碼 登入框

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

20151231144545918.png (337×264)

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

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

20151231144607058.png (337×267)

今天,我将给大家介绍,在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登录框显示/隐藏输入的密码
这可以让用户知道刚刚输入了什么字符,减少了输错密码的可能性,同时兼具防偷窥功能。

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

20151231144907311.png (339×264)

全部隐藏密码,点击密码框右边的眼睛图标可以显示密码

20151231144800165.png (332×264)
全部显示密码,点击密码框右边的锁头图标可以隐藏密码

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>
<&#63;php 
}
add_action( 'login_enqueue_scripts', 'ludou_prevue' );
&#63;>
登入後複製

好了,大功造成!

补充说明

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PHP 與 Flutter 的比較:行動裝置開發的最佳選擇 PHP 與 Flutter 的比較:行動裝置開發的最佳選擇 May 06, 2024 pm 10:45 PM

PHP和Flutter是行動端開發的流行技術。 Flutter勝在跨平台能力、效能和使用者介面,適合需要高效能、跨平台和自訂UI的應用程式。 PHP則適用於效能較低、不跨平台的伺服器端應用程式。

如何使用手機設定路由器WiFi密碼(以手機為工具) 如何使用手機設定路由器WiFi密碼(以手機為工具) Apr 24, 2024 pm 06:04 PM

無線網路已成為人們生活中不可或缺的一部分、在當今數位化的世界中。保護個人無線網路的安全性卻顯得格外重要、然而。設定強密碼是確保你的WiFi網路不會被他人入侵的關鍵。保障你的網路安全,本文將詳細介紹如何使用手機修改路由器WiFi密碼。 1.開啟路由器管理頁面-在手機瀏覽器中開啟路由器管理頁面、透過輸入路由器的預設IP位址。 2.輸入管理員使用者名稱和密碼-以獲得存取權限,在登入頁面中輸入正確的管理員使用者名稱和密碼。 3.導覽至無線設定頁面-尋找並點選進入無線設定頁面,在路由器管理頁面中。 4.找到當前Wi

手機修改wifi密碼教學(簡單操作) 手機修改wifi密碼教學(簡單操作) Apr 26, 2024 pm 06:25 PM

無線網路已成為我們生活中不可或缺的一部分、隨著網路的快速發展。為了保護個人資訊和網路安全,定期更改wifi密碼是非常重要的、然而。幫助大家更能保護家庭網路安全,本文將為大家介紹如何利用手機修改wifi密碼的詳細教學。 1.了解wifi密碼的重要性wifi密碼是保護個人資訊和網路安全的道防線,在網路時代、了解其重要性可以更好地理解為什麼需要定期修改密碼。 2.確認手機連接到wifi首先確保手機已連接到要修改密碼的wifi網路上,在修改wifi密碼之前。 3.開啟手機設定選單進入手機的設定選單、在手

wordpress如何修改頁面寬度 wordpress如何修改頁面寬度 Apr 16, 2024 am 01:03 AM

透過編輯 style.css 文件,您可以輕鬆修改 WordPress 頁面寬度:編輯 style.css 文件,新增 .site-content { max-width: [您的首選寬度]; }。修改 [您的首選寬度] 以設定頁面寬度。儲存變更並清除快取(可選)。

Win10密碼不符合密碼原則要求咋辦? 電腦密碼不符合政策要求解決方法 Win10密碼不符合密碼原則要求咋辦? 電腦密碼不符合政策要求解決方法 Jun 25, 2024 pm 04:59 PM

在Windows10系統中,密碼原則是一套安全性規則,確保使用者設定的密碼符合一定的強度和複雜性要求,而係統提示您的密碼不符合密碼原則要求則通常意味著您的密碼沒有達到微軟設定的複雜度、長度或字元種類的標準,那麼這種情況要如何避免呢?使用者可以直接的找到本地電腦策略下的密碼策略來進行操作就可以了,下面就一起來看看吧。不符合密碼原則規範的解決方法修改密碼長度:根據密碼原則要求,我們可以嘗試增加密碼的長度,例如將原來的6位密碼改為8位或更長。新增特殊字符:密碼策略通常要求包含特殊字符,如@、#、$等。我

wordpress文章在哪個資料夾 wordpress文章在哪個資料夾 Apr 16, 2024 am 10:29 AM

WordPress 文章儲存在 /wp-content/uploads 資料夾中。此資料夾使用子資料夾對不同類型的上傳進行分類,包括按年、月和文章 ID 組織的文章。文章檔案以純文字格式 (.txt) 存儲,檔案名稱通常包含其 ID 和標題。

wordpress模板檔案在哪 wordpress模板檔案在哪 Apr 16, 2024 am 11:00 AM

WordPress 範本檔案位於 /wp-content/themes/[主題名稱]/ 目錄。它們用於決定網站的外觀和功能,包括頁首(header.php)、頁尾(footer.php)、主模板(index.php)、單篇文章(single.php)、頁(page.php)、檔案(archive.php)、類別(category.php)、標籤(tag.php)、搜尋(search.php)和404 錯誤頁面(404.php)。透過編輯和修改這些文件,可以自訂 WordPress 網站的外

wordpress如何搜尋作者 wordpress如何搜尋作者 Apr 16, 2024 am 01:18 AM

在 WordPress 中搜尋作者:1. 登入管理面板後,導覽至“文章”或“頁面”,使用搜尋欄輸入作者姓名,在“篩選器”中選擇“作者”。 2. 其他技巧:使用通配符擴大搜尋範圍,使用運算子組合條件,或輸入作者 ID 以搜尋文章。

See all articles