如何在不使用JavaScript或jQuery的表單的情況下在登錄中創建記住我的功能

我幾乎完成了我的項目，但我的登錄規範尚未100％完成。 記住我功能還沒有工作。如何在不使用JavaScript或jQuery的表單的情況下在登錄中創建記住我的功能

HTML

<input type="text" id="signinId" class="email-input" placeholder="Email"> 
<input type="password" id="signinPwd" class="password-input" placeholder="Password"> 


<input id="rememberChkBox" type="checkbox"> 
<button id="Sign" class="button">Login</button>

jQuery腳本

$(document).ready(function(){ 
    $("#Sign").click(function(){ 

     //Script for login is here... 

    }); 
});

我不是在這個登錄頁面使用表單

。規格是當登錄時勾選複選框時，用戶必須被重新編排。一旦他註銷，文本框應該是空的，當點擊#signinId輸入時，他的用戶名必須顯示。

它應該是這樣的，如果可能的話：

Sceenshot 1： When email input is clicked

截圖2：Autofill

任何幫助是非常讚賞。預先感謝您。

來源

2016-01-18 Jojo

只是在這裏提到一個提示......您所看到的自動填充是來自瀏覽器。你可以知道這是操縱這些輸入字段的瀏覽器，因爲背景顏色變化 - 在這種情況下 - 是黃色的。 – Lix

如果您在Chrome中保存了您的密碼，它將始終是Chrome功能的自動填充功能。要忽略頁面上維護用戶名的歷史記錄，您可以在輸入框中使用'autocomplete =「off」'作爲屬性 –

是的，我需要該功能，這就是我需要實現的功能。但沒有瀏覽器的功能。 – Jojo

當登錄表格已被綁定時，選中複選框（如果已選中），將包括用戶名和密碼的登錄表單數據存儲在相關的cookie中。當用戶下一次訪問該頁面時，您可以閱讀該Cookie，如果已設置，則使用存儲的數據填寫表單。

這個小提琴可以幫助你： https://jsfiddle.net/wrvnsst2/

您可以使用下面的鏈接瞭解如何使用cookie jQuery的工作： http://www.sitepoint.com/eat-those-cookies-with-jquery/

一些代碼來解釋更多：

$(document).on(ready,function(){ 

fillByMemory() 
$('button#sign').on('click',function(){ 

    if($('#rememberChkBox').val()){ 
     rememberMe(); 
    } 


doLogin(); 
}); 



}); 

function rememberMe(){ 
     $.cookie('id',$('#signinId').val()); 
     $.cookie('pass',$('#signinPwd').val()); 

} 

function fillByMemory(){ 
    if(!!$.cookie('id')) 
     $('#signinId').val($.cookie('id')); 

    if(!!$.cookie('pass')) 
     $('#signinPwd').val($.cookie('pass')); 
}

來源

2016-01-18 10:01:00

哦，你會密碼存儲在cookie中，嚴重嗎？ – user776686

如果安全性至關重要，您可以將服務器中的令牌存儲在cookie中 –

它對我來說很完美..

你需要Jquery.cookie.min.js。

$(function() { 

    if (localStorage.chkbox && localStorage.chkbox != '') { 
     $('#rememberChkBox').attr('checked', 'checked'); 
     $('#signinId').val(localStorage.username); 
     $('#signinPwd').val(localStorage.pass); 
    } else { 
     $('#rememberChkBox').removeAttr('checked'); 
     $('#signinId').val(''); 
     $('#signinPwd').val(''); 
    } 

    $('#rememberChkBox').click(function() { 

     if ($('#rememberChkBox').is(':checked')) { 
      // save username and password 
      localStorage.username = $('#signinId').val(); 
      localStorage.pass = $('#signinPwd').val(); 
      localStorage.chkbox = $('#rememberChkBox').val(); 
     } else { 
      localStorage.username = ''; 
      localStorage.pass = ''; 
      localStorage.chkbox = ''; 
     } 
    }); 
});

來源

2017-06-29 07:18:41 Panchi

如何在不使用JavaScript或jQuery的表單的情況下在登錄中創建記住我的功能

回答

相關問題