Heim Backend-Entwicklung PHP-Tutorial 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' );
Nach dem Login kopieren

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

补充说明
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;>
Nach dem Login kopieren

好了,大功造成!

补充说明

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

PHP vs. Flutter: Die beste Wahl für die mobile Entwicklung PHP vs. Flutter: Die beste Wahl für die mobile Entwicklung May 06, 2024 pm 10:45 PM

PHP und Flutter sind beliebte Technologien für die mobile Entwicklung. Flutter zeichnet sich durch plattformübergreifende Funktionen, Leistung und Benutzeroberfläche aus und eignet sich für Anwendungen, die eine hohe Leistung, plattformübergreifende und benutzerdefinierte Benutzeroberfläche erfordern. PHP eignet sich für serverseitige Anwendungen mit geringerer Leistung und nicht plattformübergreifend.

So legen Sie das WLAN-Passwort des Routers mit dem Mobiltelefon fest (mit dem Mobiltelefon als Werkzeug) So legen Sie das WLAN-Passwort des Routers mit dem Mobiltelefon fest (mit dem Mobiltelefon als Werkzeug) Apr 24, 2024 pm 06:04 PM

Drahtlose Netzwerke sind in der heutigen digitalen Welt zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Besonders wichtig ist jedoch der Schutz der Sicherheit persönlicher drahtloser Netzwerke. Das Festlegen eines sicheren Passworts ist der Schlüssel, um sicherzustellen, dass Ihr WLAN-Netzwerk nicht von anderen gehackt werden kann. Um die Sicherheit Ihres Netzwerks zu gewährleisten, erfahren Sie in diesem Artikel ausführlich, wie Sie mit Ihrem Mobiltelefon das WLAN-Passwort des Routers ändern. 1. Öffnen Sie die Router-Verwaltungsseite – Öffnen Sie die Router-Verwaltungsseite im mobilen Browser und geben Sie die Standard-IP-Adresse des Routers ein. 2. Geben Sie den Administrator-Benutzernamen und das Passwort ein. Um Zugriff zu erhalten, geben Sie auf der Anmeldeseite den korrekten Administrator-Benutzernamen und das richtige Passwort ein. 3. Navigieren Sie zur Seite mit den WLAN-Einstellungen – suchen Sie auf der Router-Verwaltungsseite nach der Seite mit den WLAN-Einstellungen und klicken Sie darauf, um sie aufzurufen. 4. Finden Sie das aktuelle WLAN

Anleitung zum Ändern des WLAN-Passworts auf einem Mobiltelefon (einfache Bedienung) Anleitung zum Ändern des WLAN-Passworts auf einem Mobiltelefon (einfache Bedienung) Apr 26, 2024 pm 06:25 PM

Drahtlose Netzwerke sind mit der rasanten Entwicklung des Internets zu einem unverzichtbaren Bestandteil unseres Lebens geworden. Zum Schutz persönlicher Daten und der Netzwerksicherheit ist es jedoch sehr wichtig, Ihr WLAN-Passwort regelmäßig zu ändern. Um Ihnen dabei zu helfen, die Sicherheit Ihres Heimnetzwerks besser zu schützen, stellt Ihnen dieser Artikel eine detaillierte Anleitung vor, wie Sie Ihr WLAN-Passwort mit Ihrem Mobiltelefon ändern können. 1. Verstehen Sie die Bedeutung von WLAN-Passwörtern. WLAN-Passwörter sind die erste Verteidigungslinie zum Schutz persönlicher Daten und der Netzwerksicherheit. Wenn Sie ihre Bedeutung verstehen, können Sie besser verstehen, warum Sie Ihr Passwort regelmäßig ändern müssen. 2. Stellen Sie sicher, dass das Telefon mit dem WLAN verbunden ist, bevor Sie das WLAN-Passwort ändern. 3. Öffnen Sie das Einstellungsmenü des Telefons und rufen Sie das Einstellungsmenü des Telefons auf.

Was soll ich tun, wenn mein Win10-Passwort nicht den Passwortrichtlinienanforderungen entspricht? Was kann ich tun, wenn mein Computerpasswort nicht den Richtlinienanforderungen entspricht? Was soll ich tun, wenn mein Win10-Passwort nicht den Passwortrichtlinienanforderungen entspricht? Was kann ich tun, wenn mein Computerpasswort nicht den Richtlinienanforderungen entspricht? Jun 25, 2024 pm 04:59 PM

Im Windows 10-System handelt es sich bei der Kennwortrichtlinie um eine Reihe von Sicherheitsregeln, um sicherzustellen, dass die von Benutzern festgelegten Kennwörter bestimmte Stärke- und Komplexitätsanforderungen erfüllen Das Kennwort entspricht nicht den von Microsoft festgelegten Anforderungen an Komplexität, Länge oder Zeichentypen. Wie kann dies vermieden werden? Benutzer können die Passwortrichtlinie direkt unter der lokalen Computerrichtlinie finden, um Vorgänge auszuführen. Lösungen, die nicht den Spezifikationen der Passwortrichtlinie entsprechen: Ändern Sie die Passwortlänge: Gemäß den Anforderungen der Passwortrichtlinie können wir versuchen, die Länge des Passworts zu erhöhen, indem wir beispielsweise das ursprüngliche 6-stellige Passwort in ein 8-stelliges oder längeres Passwort ändern. Sonderzeichen hinzufügen: Passwortrichtlinien erfordern häufig die Einbeziehung von Sonderzeichen wie @, #, $ usw. ICH

So ändern Sie die Seitenbreite in WordPress So ändern Sie die Seitenbreite in WordPress Apr 16, 2024 am 01:03 AM

Sie können die Breite Ihrer WordPress-Seite ganz einfach ändern, indem Sie Ihre style.css-Datei bearbeiten: Bearbeiten Sie Ihre style.css-Datei und fügen Sie .site-content { max-width: [Ihre bevorzugte Breite] hinzu. Bearbeiten Sie [Ihre bevorzugte Breite], um die Seitenbreite festzulegen. Änderungen speichern und Cache leeren (optional).

So erstellen Sie eine Produktseite in WordPress So erstellen Sie eine Produktseite in WordPress Apr 16, 2024 am 12:39 AM

Erstellen Sie eine Produktseite in WordPress: 1. Erstellen Sie das Produkt (Name, Beschreibung, Bilder); 2. Passen Sie die Seitenvorlage an (fügen Sie Titel, Beschreibung, Bilder, Schaltflächen hinzu). 3. Geben Sie Produktinformationen ein (Lagerbestand, Größe, Gewicht); 4. Variationen erstellen (verschiedene Farben, Größen); 6. Kommentare aktivieren/deaktivieren;

In welchem ​​Ordner liegen WordPress-Artikel? In welchem ​​Ordner liegen WordPress-Artikel? Apr 16, 2024 am 10:29 AM

WordPress-Beiträge werden im Ordner /wp-content/uploads gespeichert. Dieser Ordner verwendet Unterordner, um verschiedene Arten von Uploads zu kategorisieren, einschließlich Artikeln, die nach Jahr, Monat und Artikel-ID geordnet sind. Artikeldateien werden im Nur-Text-Format (.txt) gespeichert und der Dateiname enthält normalerweise seine ID und seinen Titel.

Wo ist die WordPress-Vorlagendatei? Wo ist die WordPress-Vorlagendatei? Apr 16, 2024 am 11:00 AM

WordPress-Vorlagendateien befinden sich im Verzeichnis /wp-content/themes/[Themenname]/. Sie werden verwendet, um das Erscheinungsbild und die Funktionalität der Website zu bestimmen, einschließlich Kopfzeile (header.php), Fußzeile (footer.php), Hauptvorlage (index.php), einzelner Artikel (single.php), Seite (page.php). , Archiv (archive.php), Kategorie (category.php), Tag (tag.php), Suche (search.php) und 404-Fehlerseite (404.php). Durch Bearbeiten und Modifizieren dieser Dateien können Sie das Erscheinungsbild Ihrer WordPress-Website anpassen

See all articles