WordPress 사용자 로그 인 상자 암호 숨 김 및 부분 표시 방법

워드 프레스 로그 인 페이지 의 암호 상자 에 마지막 입력 문 자 를 표시 합 니 다.
일반적인 상황 에서 웹 페이지 의 디자이너 들 은 암호 입력 상자 의 모든 문 자 를 검 은 점 으로 숨 기 고 누군가가 뒤에서 입력 한 비밀 번 호 를 훔 쳐 보지 않도록 한다.예 를 들 어:

이러한 암호 입력 모드 는 훔 쳐 볼 위험 을 줄 였 지만 우리 의 암호 입력 에 많은 번 거 로 움 을 가 져 왔 다.도대체 어떤 문 자 를 입력 했 는 지 모 르 기 때문에 비밀 번 호 를 잘못 입력 하 는 경우 가 많아 많은 시간 을 낭비 했다.
현재 스마트 폰 의 많은 애플 리 케 이 션 에서 이러한 암호 상자 처리 방식 을 사용 하고 있다 는 것 을 알 게 되 었 을 것 입 니 다.사용자 가 암호 상자 에 입력 한 마지막 문 자 는 먼저 2-3 초 를 표시 한 다음 에 숨 길 것 입 니 다.그러면 사용자 가 방금 어떤 문 자 를 입력 했 는 지 알 게 되 고 잘못 되 었 을 가능성 을 줄 이 는 동시에 엿 보기 방지 기능 도 갖 출 수 있 습 니 다.예:

오늘,나 는 워드 프레스 에서 이 기능 을 어떻게 실현 하 는 지,절차 가 매우 간단 하 다 는 것 을 소개 할 것 이다.
1.js 추가
4다운로드필요 한 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 코드 두 번 째 줄 의/jQuery.dpassword.js 를/js/jQuery.dpassword.js 로 변경 해 야 합 니 다.
2.이 기능 은 비밀 번 호 를 입력 할 때 마지막 에 문 자 를 입력 하거나 삭제 할 수 있 습 니 다.검 은 점 으로 숨겨 진 암호 사이 에 문 자 를 추가 하거나 삭제 할 수 없습니다.
워드 프레스 로그 인 상자 에 입력 한 암 호 를 표시 하거나 숨 깁 니 다.
이 는 사용자 에 게 방금 어떤 문 자 를 입력 했 는 지 알 리 고 비밀 번 호 를 잘못 입력 했 을 가능성 을 줄 이 는 동시에 엿 보기 방지 기능 도 갖 추고 있다.
현재,우 리 는 사용자 가 필요 에 따라 입력 한 비밀 번 호 를 모두 숨 길 것 인지,아니면 입력 한 비밀 번 호 를 모두 표시 할 것 인 지 를 직접 선택 할 수 있 는 또 다른 선택 이 있 습 니 다.모든 암호 상자 의 내용 을 표시 할 때 사용자 가 잘못 질 가능성 이 크게 낮 아 지 는 것 도 마이크로소프트 가 추천 하 는 암호 상자 처리 방식 이다.효 과 는 다음 과 같 습 니 다:

모든 비밀 번 호 를 숨 기 고 비밀번호 상자 오른쪽 눈 아이콘 을 누 르 면 비밀 번 호 를 표시 할 수 있 습 니 다.

모든 암 호 를 표시 합 니 다.암호 상자 오른쪽 자물쇠 아이콘 을 누 르 면 암 호 를 숨 길 수 있 습 니 다.
1.js 추가
4다운로드필요 한 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 파일 을 두 려 면 phop 코드 세 번 째 줄 의/jquery.prevue.min.js 를/js/jquery.prevue.min.js 로 바 꿔 야 합 니 다.
2.이 기능 은 1.9.0 이상 버 전의 jQuery 지원 이 필요 합 니 다.