ฉันจะรับเบราว์เซอร์เพื่อแจ้งให้บันทึกรหัสผ่านได้อย่างไร

สวัสดีฉันกำลังทำงานกับเว็บแอปที่มีกล่องโต้ตอบเข้าสู่ระบบที่ใช้งานได้:

1. ผู้ใช้คลิกที่ "เข้าสู่ระบบ"
2. แบบฟอร์มเข้าสู่ระบบ HTML เต็มไปด้วย AJAX และแสดงใน DIV ในหน้า
3. ผู้ใช้ป้อนผู้ใช้ / ผ่านในฟิลด์และคลิกส่ง ไม่ใช่<form>- ผู้ใช้ / รหัสผ่านถูกส่งผ่าน AJAX
4. หากผู้ใช้ / รหัสผ่านไม่เป็นไรหน้าโหลดซ้ำโดยผู้ใช้ที่เข้าสู่ระบบ
5. หากผู้ใช้ / รหัสผ่านไม่ดีหน้าจะไม่โหลดซ้ำ แต่ข้อผิดพลาดปรากฏขึ้นใน DIV และผู้ใช้จะต้องลองอีกครั้ง

นี่คือปัญหา: เบราว์เซอร์ไม่เคยเสนอ "บันทึกรหัสผ่านนี้ใช่หรือไม่ใช่ / ไม่ / ไม่ได้ตอนนี้" แจ้งว่าทำเพื่อไซต์อื่น

ฉันลองตัดคำ<div>ใน<form>แท็กด้วย "autocomplete = 'on'" แต่ไม่ได้ทำให้แตกต่าง

เป็นไปได้หรือไม่ที่จะได้รับเบราว์เซอร์เพื่อเสนอให้จัดเก็บรหัสผ่านโดยไม่ต้องทำขั้นตอนการเข้าสู่ระบบใหม่อีกครั้ง

ขอบคุณ Eric

ป.ล. เพื่อเพิ่มคำถามของฉันฉันทำงานกับเบราว์เซอร์ที่เก็บรหัสผ่านและฉันไม่เคยคลิก "ไม่เคยมีเว็บไซต์นี้" ... นี่เป็นปัญหาทางเทคนิคกับเบราว์เซอร์ที่ตรวจไม่พบว่าเป็นแบบฟอร์มเข้าสู่ระบบไม่ใช่ ข้อผิดพลาดของผู้ประกอบการ :-)

ฉันพบคำตอบที่สมบูรณ์สำหรับคำถามนี้ (ฉันได้ทำการทดสอบใน Chrome 27 และ Firefox 21)

มีสองสิ่งที่ควรทราบ:

1. ทริกเกอร์ 'บันทึกรหัสผ่าน' และ
2. กู้คืนชื่อผู้ใช้ / รหัสผ่านที่บันทึกไว้

1. ทริกเกอร์ 'บันทึกรหัสผ่าน':

สำหรับFirefox 21ระบบจะเรียกใช้ 'บันทึกรหัสผ่าน' เมื่อตรวจพบว่ามีรูปแบบที่ประกอบด้วยช่องป้อนข้อความและมีการส่งฟิลด์ป้อนรหัสผ่าน ดังนั้นเราต้องใช้

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin() ajax ทำการล็อกอินและโหลดใหม่ / เปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ในขณะที่ event.preventDefault()บล็อกการเปลี่ยนเส้นทางดั้งเดิมเนื่องจากการส่งแบบฟอร์ม

หากคุณจัดการกับ Firefox เท่านั้นโซลูชันดังกล่าวเพียงพอ แต่ไม่สามารถใช้งานได้ใน Chrome 27 จากนั้นคุณจะถามวิธีการ 'บันทึกรหัสผ่าน' ใน Chrome 27

สำหรับChrome 27 , 'บันทึกรหัสผ่าน' ถูกเรียกหลังจากที่มันถูกเปลี่ยนเส้นทางไปยังหน้าเว็บโดยกรอกแบบฟอร์มที่มีข้อมูลป้อนข้อความที่มีชื่อแอตทริบิวต์ = 'ชื่อผู้ใช้'และเขตใส่รหัสผ่านที่มีชื่อแอตทริบิวต์ = 'รหัสผ่าน' ดังนั้นเราไม่สามารถปิดกั้นการเปลี่ยนเส้นทางเนื่องจากการส่งแบบฟอร์ม แต่เราสามารถทำการเปลี่ยนเส้นทางได้หลังจากที่เราได้ทำการเข้าสู่ระบบ ajax (หากคุณต้องการให้ ajax login ไม่โหลดหน้าเว็บซ้ำหรือไม่เปลี่ยนเส้นทางไปยังหน้าเว็บโชคไม่ดีที่โซลูชันของฉันใช้งานไม่ได้)จากนั้นเราสามารถใช้

<form id='loginForm' action='signedIn.xxx' method='post'>
    <input type='text' name='username'>
    <input type='password' name='password'>
    <button id='loginButton' type='button'>Login</button>
</form>
<script>
    $('#loginButton').click(someFunctionForLogin);
    function someFunctionForLogin(){
        if(/*ajax login success*/) {
            $('#loginForm').submit();
        }
        else {
            //do something to show login fail(e.g. display fail messages)
        }
    }
</script>

ปุ่มที่มี type = 'button' จะทำให้ไม่ต้องส่งแบบฟอร์มเมื่อคลิกปุ่ม จากนั้นผูกฟังก์ชั่นกับปุ่มเพื่อเข้าสู่ระบบ Ajax ในที่สุดการโทร$('#loginForm').submit();เปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ หากหน้าลงชื่อเข้าใช้เป็นหน้าปัจจุบันคุณสามารถแทนที่ 'เซ็นต์อิน. xxx' ด้วยหน้าปัจจุบันเพื่อให้ 'รีเฟรช'

ตอนนี้คุณจะพบว่าวิธีการสำหรับ Chrome 27 นั้นใช้ได้ใน Firefox 21 ด้วยดังนั้นจึงเป็นการดีกว่าที่จะใช้

2. กู้คืนชื่อผู้ใช้ / รหัสผ่านที่บันทึกไว้:

หากคุณมีรหัสการเข้าสู่ระบบแบบ HTML เป็นแล้วคุณจะไม่พบปัญหาในการกู้คืนรหัสผ่านที่บันทึกไว้ใน loginForm
อย่างไรก็ตามชื่อผู้ใช้ / รหัสผ่านที่บันทึกไว้จะไม่ถูกผูกไว้กับ loginForm ถ้าคุณใช้ js / jquery เพื่อให้ loginForm แบบไดนามิกเพราะชื่อผู้ใช้ / รหัสผ่านที่บันทึกไว้จะถูกผูกเมื่อเอกสารโหลดเท่านั้น
ดังนั้นคุณจำเป็นต้องรหัสหนัก ๆ ของ loginForm เป็น HTML และใช้ js / jquery เพื่อย้าย / แสดง / ซ่อน loginForm แบบไดนามิก

หมายเหตุ: หากคุณเข้าสู่ระบบ ajax อย่าเพิ่มautocomplete='off'ในรูปแบบแท็กเช่น

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' จะทำให้ชื่อผู้ใช้ / รหัสผ่านการเรียกคืนสู่ loginForm ล้มเหลวเนื่องจากคุณไม่อนุญาตให้ใช้ชื่อผู้ใช้ / รหัสผ่านโดยอัตโนมัติ

ใช้ปุ่มเพื่อเข้าสู่ระบบ:

ถ้าคุณใช้type="button"กับonclickการจัดการเพื่อเข้าสู่ระบบโดยใช้ajaxแล้วเบราว์เซอร์จะไม่เสนอการบันทึกรหัสผ่าน

<form id="loginform">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="button" value="Login" onclick="login(this.form);" />
</form>

เนื่องจากแบบฟอร์มนี้ไม่มีปุ่มส่งและไม่มีฟิลด์การกระทำเบราว์เซอร์จะไม่เสนอให้บันทึกรหัสผ่าน

ใช้ปุ่มส่งเพื่อเข้าสู่ระบบ:

อย่างไรก็ตามหากคุณเปลี่ยนปุ่มไปที่type="submit"และจัดการการส่งเบราว์เซอร์จะเสนอให้บันทึกรหัสผ่าน

<form id="loginform" action="login.php" onSubmit="return login(this);">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="submit" value="Login" />
</form>

ใช้วิธีนี้เบราว์เซอร์ควรเสนอให้บันทึกรหัสผ่าน

นี่คือJavascript ที่ใช้ในทั้งสองวิธี:

function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}

ฉันดิ้นรนกับสิ่งนี้ด้วยตัวเองและในที่สุดฉันก็สามารถติดตามปัญหาและสิ่งที่ทำให้มันล้มเหลว

ทุกอย่างเกิดจากความจริงที่ว่าฟอร์มการเข้าสู่ระบบของฉันถูกแทรกเข้าสู่หน้าเว็บแบบไดนามิก (โดยใช้ backbone.js) ทันทีที่ฉันฝังแบบฟอร์มการเข้าสู่ระบบของฉันลงในไฟล์ index.html ทุกอย่างก็ทำงานได้อย่างมีเสน่ห์

ฉันคิดว่านี่เป็นเพราะเบราว์เซอร์จะต้องทราบว่ามีแบบฟอร์มการเข้าสู่ระบบที่มีอยู่ แต่เนื่องจากของฉันถูกฉีดเข้าไปในหน้าเว็บแบบไดนามิกก็ไม่ทราบว่ามีรูปแบบการเข้าสู่ระบบ "ของจริง" ที่เคยมีอยู่

วิธีนี้ใช้ได้ผลสำหรับฉันโพสต์โดย Eric บน codingforums

สาเหตุที่ทำให้ระบบไม่แจ้งเนื่องจากเบราว์เซอร์ต้องการหน้าเว็บเพื่อทำการรีเฟรชกลับไปที่เซิร์ฟเวอร์ เคล็ดลับเล็กน้อยที่คุณสามารถทำได้คือการดำเนินการสองแบบด้วยแบบฟอร์ม การกระทำแรกคือเมื่อมีการเรียกรหัส Ajax ของคุณ นอกจากนี้ยังมีรูปแบบเป้าหมาย iframe ที่ซ่อนอยู่

รหัส:

<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">

ดูว่าสิ่งนั้นทำให้พรอมต์ปรากฏหรือไม่

เอริค

โพสต์เมื่อhttp://www.codingforums.com/showthread.php?t=123007

มีทางออกที่ดีที่สุดในการบังคับเบราว์เซอร์ทั้งหมด (ผ่านการทดสอบ: chrome 25, Safari, 5.1, IE10, Firefox 16) เพื่อขอให้บันทึกรหัสผ่านโดยใช้jQueryและajaxตามคำขอ:

JS:

$(document).ready(function() {
    $('form').bind('submit', $('form'), function(event) {
        var form = this;

        event.preventDefault();
        event.stopPropagation();

        if (form.submitted) {
            return;
        }

        form.submitted = true;

        $.ajax({
            url: '/login/api/jsonrpc/',
            data: {
                username: $('input[name=username]').val(),
                password: $('input[name=password]').val()
            },
            success: function(response) {
                form.submitted = false;
                form.submit(); //invoke the save password in browser
            }
        });
    });
});

HTML:

<form id="loginform" action="login.php" autocomplete="on">
    <label for="username">Username</label>
    <input name="username" type="text" value="" autocomplete="on" />
    <label for="password">Password</label>
    <input name="password" type="password" value="" autocomplete="on" />
   <input type="submit" name="doLogin" value="Login" />
</form>

เคล็ดลับอยู่ในการหยุดฟอร์มเพื่อส่งวิธีการของตนเอง (event.stopPropagation ()) แทนที่จะส่งรหัสของคุณเอง ($ .ajax ()) และในการเรียกกลับที่สำเร็จของ ajax ส่งแบบฟอร์มอีกครั้งเพื่อให้เบราว์เซอร์จับและแสดง ขอรหัสผ่านบันทึก คุณอาจเพิ่มตัวจัดการข้อผิดพลาดบางอย่าง ฯลฯ

หวังว่ามันจะช่วยให้ใครบางคน

ฉันลองคำตอบของ spetsonแต่ไม่ได้ผลสำหรับฉันใน Chrome 18 สิ่งที่ทำงานคือการเพิ่มตัวจัดการโหลดให้กับ iframe และไม่รบกวนการส่ง (jQuery 1.7):

function getSessions() {
    $.getJSON("sessions", function (data, textStatus) {
        // Do stuff
    }).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
    $('#loginForm').fadeOut();
}); 
$('#loginframe').on('load', getSessions);
getSessions();

HTML:

<div id="loginForm">
    <h3>Please log in</h3>
    <form action="/login" method="post" target="loginframe">
            <label>Username :</label>
            <input type="text" name="login" id="username" />
            <label>Password :</label>
            <input type="password" name="password" id="password"/>
            <br/>
            <button type="submit" id="loginB" name="loginB">Login!</button>
    </form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>

getSessions () ทำการโทร AJAX และแสดง Div loginForm ถ้ามันล้มเหลว (บริการเว็บจะส่งคืน 403 หากผู้ใช้ไม่ได้รับการรับรองความถูกต้อง)

ผ่านการทดสอบการทำงานใน FF และ IE8 เช่นกัน

เบราว์เซอร์อาจไม่สามารถตรวจพบว่าแบบฟอร์มของคุณเป็นแบบฟอร์มเข้าสู่ระบบ ตามที่บางส่วนของการสนทนาในคำถามก่อนหน้านี้<input type="password">เบราว์เซอร์รูปลักษณ์สำหรับเขตข้อมูลแบบฟอร์มที่มีลักษณะเหมือน ฟิลด์แบบฟอร์มรหัสผ่านของคุณมีการใช้งานแบบเดียวกันหรือไม่

แก้ไข:เพื่อตอบคำถามของคุณด้านล่างฉันคิดว่า Firefox ตรวจจับรหัสผ่านโดยform.elements[n].type == "password"(วนซ้ำผ่านองค์ประกอบของแบบฟอร์มทั้งหมด) แล้วตรวจพบฟิลด์ชื่อผู้ใช้โดยค้นหาย้อนหลังผ่านองค์ประกอบแบบฟอร์มสำหรับช่องข้อความทันทีก่อนฟิลด์รหัสผ่าน (ข้อมูลเพิ่มเติมที่นี่ ) จากสิ่งที่ฉันสามารถบอกได้ว่าฟอร์มการเข้าสู่ระบบของคุณต้องเป็นส่วนหนึ่งของ<form>Firefox หรือจะไม่ตรวจพบ

aproach ง่าย ๆ 2020

นี่จะเปิดใช้งานการเติมข้อความอัตโนมัติและบันทึกรหัสผ่านในเบราว์เซอร์โดยอัตโนมัติ

• autocomplete="on" (แบบฟอร์ม)
• autocomplete="username" (การป้อนข้อมูลอีเมล / ชื่อผู้ใช้)
• autocomplete="current-password" (อินพุตรหัสผ่าน)

<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

อ่านเพิ่มเติมที่เอกสารประกอบของ Apple: การเปิดใช้งานการป้อนรหัสผ่านอัตโนมัติในองค์ประกอบอินพุต HTML

ฉันใช้เวลามากมายอ่านคำตอบต่าง ๆ ในหัวข้อนี้และสำหรับฉันมันเป็นสิ่งที่แตกต่างออกไปเล็กน้อย (เกี่ยวข้อง แต่แตกต่างกัน) บน Mobile Safari (อุปกรณ์ iOS) หากแบบฟอร์มการเข้าสู่ระบบเป็น HIDDEN เมื่อหน้าโหลดขึ้นมาจะไม่ปรากฏพรอมต์ (หลังจากที่คุณแสดงแบบฟอร์มจากนั้นส่งแบบฟอร์ม) คุณสามารถทดสอบด้วยรหัสต่อไปนี้ซึ่งจะแสดงแบบฟอร์ม 5 วินาทีหลังจากโหลดหน้า ลบ JS และจอแสดงผล: ไม่มีและใช้งานได้ ฉันยังหาวิธีแก้ปัญหานี้เพียงโพสต์ในกรณีที่คนอื่นมีปัญหาเดียวกันและไม่สามารถหาสาเหตุ

JS:

$(function() {
  setTimeout(function() {
    $('form').fadeIn();
  }, 5000);
});

HTML:

<form method="POST" style="display: none;">
  <input name='email' id='email' type='email' placeholder='email' />
  <input name='password' id='password' type='password' placeholder='password' />
  <button type="submit">LOGIN</button>
</form>

ไม่มีคำตอบใดที่ทำให้ชัดเจนคุณสามารถใช้ HTML5 History API เพื่อแจ้งให้บันทึกรหัสผ่าน

ก่อนอื่นคุณต้องแน่ใจว่าคุณมีอย่างน้อย <form>องค์ประกอบพร้อมรหัสผ่านและอีเมลหรือชื่อผู้ใช้ เบราว์เซอร์ส่วนใหญ่จัดการสิ่งนี้โดยอัตโนมัติตราบใดที่คุณใช้ประเภทอินพุตที่ถูกต้อง (รหัสผ่านอีเมลหรือชื่อผู้ใช้) แต่เพื่อให้แน่ใจว่าตั้งค่าการเติมข้อความอัตโนมัติให้ถูกต้องสำหรับองค์ประกอบอินพุตแต่ละรายการ

คุณสามารถดูรายการค่าเติมข้อความอัตโนมัติได้ที่นี่: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

สิ่งที่คุณต้องการคือ: username,emailและcurrent-password

จากนั้นคุณมีความเป็นไปได้สองอย่าง:

• หากคุณนำทางไปยัง URL อื่นหลังจากส่งเบราว์เซอร์ส่วนใหญ่จะแจ้งให้บันทึกรหัสผ่าน
• หากคุณไม่ต้องการเปลี่ยนเส้นทางไปยัง URL อื่นหรือแม้แต่โหลดหน้าซ้ำ (เช่นแอปพลิเคชันหน้าเดียว) เพียงป้องกันค่าเริ่มต้นของเหตุการณ์ (โดยใช้ e.preventDefault) ในตัวจัดการการส่งแบบฟอร์มของคุณ คุณสามารถใช้ API ประวัติ HTML5 เพื่อพุชบางอย่างบนประวัติเพื่อระบุว่าคุณ 'สำรวจ' ภายในแอปพลิเคชันหน้าเดียวของคุณ เบราว์เซอร์จะพร้อมท์ให้บันทึกรหัสผ่านและชื่อผู้ใช้

history.pushState({}, "Your new page title");

คุณสามารถเปลี่ยน URL ของหน้า แต่ไม่จำเป็นต้องแจ้งให้บันทึกรหัสผ่าน:

history.pushState({}, "Your new page title", "new-url");

เอกสารประกอบ: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

นี่เป็นประโยชน์เพิ่มเติมที่คุณสามารถป้องกันไม่ให้เบราว์เซอร์ขอให้บันทึกรหัสผ่านหากผู้ใช้ป้อนรหัสผ่านไม่ถูกต้อง โปรดทราบว่าในบางเบราว์เซอร์เบราว์เซอร์จะขอให้บันทึกข้อมูลประจำตัวเสมอแม้ในขณะที่คุณโทร. ป้องกันไวรัสเริ่มต้นและไม่ใช้ API ประวัติ

หากคุณไม่ต้องการนำทางออกไปและ / หรือแก้ไขประวัติเบราว์เซอร์คุณสามารถใช้ replaceState แทน (วิธีนี้ใช้ได้ผลเช่นกัน)

มีการทดสอบรหัสต่อไปนี้

• Chrome 39.0.2171.99m: การทำงาน
• Android Chrome 39.0.2171.93: การทำงาน
• เบราว์เซอร์หุ้น Android (Android 4.4): ไม่ทำงาน
• Internet Explorer 5+ (จำลอง): การทำงาน
• Internet Explorer 11.0.9600.17498 / อัปเดตเวอร์ชัน: 11.0.15: การทำงาน
• Firefox 35.0: การทำงาน

JS-Fiddle:
http://jsfiddle.net/ocozggqu/

รหัสไปรษณีย์:

// modified post-code from /programming/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.

    var form = document.createElement("form");
    form.id = "dynamicform" + Math.random();
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    form.setAttribute("style", "display: none");
    // Internet Explorer needs this
    form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById('" + form.id + "'))");

    for (var key in params)
    {
        if (params.hasOwnProperty(key))
        {
            var hiddenField = document.createElement("input");
            // Internet Explorer needs a "password"-field to show the store-password-dialog
            hiddenField.setAttribute("type", key == "password" ? "password" : "text");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    var submitButton = document.createElement("input");
    submitButton.setAttribute("type", "submit");

    form.appendChild(submitButton);

    document.body.appendChild(form);

    //form.submit(); does not work on Internet Explorer
    submitButton.click(); // "click" on submit-button needed for Internet Explorer
}

หมายเหตุ

• สำหรับการเข้าสู่ระบบแบบไดนามิกwindow.external.AutoCompleteSaveFormจำเป็นต้อง มีการโทร
• Internet Explorer ต้องการ "รหัสผ่าน" - ฟิลด์เพื่อแสดง store-password-dialog
• Internet Explorer ดูเหมือนจะต้องการคลิกที่ปุ่มส่ง (แม้ว่าจะเป็นการคลิกปลอม)

นี่คือตัวอย่าง ajax login-code:

function login(username, password, remember, redirectUrl)
{
    // "account/login" sets a cookie if successful
    return $.postJSON("account/login", {
        username: username,
        password: password,
        remember: remember,
        returnUrl: redirectUrl
    })
    .done(function ()
    {
        // login succeeded, issue a manual page-redirect to show the store-password-dialog
        post(
            redirectUrl,
            {
                username: username,
                password: password,
                remember: remember,
                returnUrl: redirectUrl
            },
            "post");
    })
    .fail(function ()
    {
        // show error
    });
};

หมายเหตุ

• "บัญชี / การเข้าสู่ระบบ" ตั้งค่าคุกกี้หากประสบความสำเร็จ
• การเปลี่ยนเส้นทางหน้า ("ด้วยตนเอง" ที่เริ่มต้นโดย js-code) ดูเหมือนว่าจำเป็นต้องมี ฉันทดสอบ iframe-post ด้วย แต่ก็ไม่ประสบความสำเร็จ

ฉันพบโซลูชันที่สวยงามพอสมควร (หรือแฮ็คไม่ว่าจะเหมาะกับอะไร) สำหรับผู้ใช้ Prototype.JS ซึ่งเป็นหนึ่งในการโฮลด์ครั้งสุดท้ายโดยใช้ Prototype การทดแทนวิธี jQuery ที่สอดคล้องกันอย่างง่ายควรทำการหลอกลวง

ขั้นแรกตรวจสอบให้แน่ใจว่ามี<form>แท็กและปุ่มส่งที่มีชื่อคลาสที่สามารถอ้างอิงได้ในภายหลัง (ในกรณีนี้faux-submit) ที่ซ้อนอยู่ภายในองค์ประกอบที่มีสไตล์ตั้งไว้display:noneดังแสดงด้านล่าง:

<form id="login_form" action="somewhere.php" method="post">
    <input type="text" name="login" />
    <input type="password" name="password" />
    <div style="display:none">
        <input class="faux-submit" type="submit" value="Submit" />
    </div>
    <button id="submit_button">Login</button>
</form>

จากนั้นสร้างผู้สังเกตการณ์การคลิกbuttonซึ่งจะ "ส่ง" แบบฟอร์มตามที่แสดง:

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

จากนั้นสร้างผู้ฟังsubmitเหตุการณ์และหยุดมัน event.stop()จะหยุดส่งกิจกรรมทั้งหมดใน DOM ยกเว้นกรณีที่ห่อไว้Event.findElementกับคลาสของปุ่มป้อนข้อมูลที่ซ่อนอยู่ (ดังที่แสดงด้านบนfaux-submit):

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

นี่คือการทดสอบว่าทำงานใน Firefox 43 และ Chrome 50

ไซต์ของคุณอาจมีอยู่แล้วในรายการที่มีการบอกเบราว์เซอร์ว่าไม่ต้องแจ้งให้บันทึกรหัสผ่าน ใน firefox ตัวเลือก -> ความปลอดภัย -> จำรหัสผ่านสำหรับไซต์ [กล่องกาเครื่องหมาย] - ข้อยกเว้น [ปุ่ม]

เพิ่มข้อมูลเพิ่มเติมอีกเล็กน้อยเพื่อคำตอบของ @Michal Roharik

หากการโทร ajax ของคุณจะส่งคืน url ที่ส่งคืนคุณควรใช้ jquery เพื่อเปลี่ยนแอ็ตทริบิวต์ form action ให้เป็น url นั้นก่อนที่จะเรียก form.submit

อดีต

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 

ฉันมีปัญหาที่คล้ายกันการลงชื่อเข้าใช้ทำด้วย ajax แต่เบราว์เซอร์ (firefox, chrome, safari และ IE 7-10) จะไม่เสนอให้บันทึกรหัสผ่านหากมีการส่งแบบฟอร์ม (#loginForm) ด้วย ajax

ในฐานะที่เป็นโซลูชั่นฉันได้เพิ่มอินพุตส่งที่ซ่อนอยู่ (#loginFormHiddenSubmit) ไปยังแบบฟอร์มที่ส่งมาจาก ajax และหลังจากการโทร ajax จะกลับมาประสบความสำเร็จฉันจะคลิกเพื่อส่งอินพุตที่ซ่อนอยู่ หน้าใด ๆ ที่จำเป็นในการรีเฟรช การคลิกสามารถถูกกระตุ้นด้วย:

jQuery('#loginFormHiddenSubmit').click();

เหตุผลที่ฉันเพิ่มปุ่มส่งซ่อนเพราะ:

jQuery('#loginForm').submit();

จะไม่เสนอให้บันทึกรหัสผ่านใน IE (แม้ว่าจะใช้ได้กับเบราว์เซอร์อื่น)

ไม่ใช่ทุกเบราว์เซอร์ (เช่น IE 6) มีตัวเลือกในการจดจำข้อมูลประจำตัว

สิ่งหนึ่งที่คุณสามารถทำได้คือ (เมื่อผู้ใช้ล็อกอินสำเร็จ) จัดเก็บข้อมูลผู้ใช้ผ่านคุกกี้และมีตัวเลือก "จดจำฉันบนเครื่องนี้" ด้วยวิธีนี้เมื่อผู้ใช้กลับมาอีกครั้ง (แม้ว่าเขาจะออกจากระบบแล้ว) เว็บแอปพลิเคชันของคุณสามารถเรียกคุกกี้และรับข้อมูลผู้ใช้ (ID ผู้ใช้ + ID เซสชัน) และอนุญาตให้เขา / เธอทำงานต่อไปได้

หวังว่านี่จะเป็นการชี้นำ :-)

ความจริงก็คือคุณไม่สามารถบังคับให้เบราว์เซอร์ถามได้ ฉันแน่ใจว่าเบราว์เซอร์มีอัลกอริทึมของตัวเองสำหรับการเดาว่าคุณได้ป้อนชื่อผู้ใช้ / รหัสผ่านเช่นกำลังมองหาอินพุตtype="password"แต่คุณไม่สามารถตั้งค่าอะไรเพื่อบังคับเบราว์เซอร์

คุณสามารถเพิ่มข้อมูลผู้ใช้ในคุกกี้ได้ตามที่คนอื่น ๆ แนะนำ หากคุณทำสิ่งนี้คุณควรเข้ารหัสอย่างน้อยที่สุดและอย่าเก็บรหัสผ่านของพวกเขา อาจเก็บชื่อผู้ใช้ของพวกเขาได้มากที่สุด

คุณสามารถแนบไดอะล็อกกับแบบฟอร์มดังนั้นอินพุตเหล่านั้นทั้งหมดจะอยู่ในรูปแบบ อีกอย่างคือสร้างฟิลด์ข้อความรหัสผ่านทันทีหลังจากฟิลด์ข้อความชื่อผู้ใช้

มันใช้งานได้ดีกว่ามากสำหรับฉันเพราะมันเป็นของแท้ 100% และเบราว์เซอร์ตรวจพบการเข้าสู่ระบบ

<form id="loginform" action="javascript:login(this);" >
 <label for="username">Username</label>
 <input name="username" type="text" value="" required="required" />
 <label for="password">Password</label>
 <input name="password" type="password" value="" required="required" />
 <a href="#" onclick="document.getElementById("loginform").submit();"  >Login</a>
</form>

การใช้คุกกี้อาจเป็นวิธีที่ดีที่สุดในการทำเช่นนี้

คุณสามารถมีช่องทำเครื่องหมายสำหรับ 'จดจำฉันได้ไหม' และให้แบบฟอร์มสร้างคุกกี้เพื่อเก็บ // ล็อกอินของผู้ใช้ // ข้อมูล แก้ไข: ข้อมูลเซสชันผู้ใช้

ในการสร้างคุกกี้คุณจะต้องประมวลผลแบบฟอร์มการเข้าสู่ระบบด้วย PHP