แทนที่การกรอกแบบฟอร์มของเบราว์เซอร์และการไฮไลต์อินพุตด้วย HTML / CSS

139

ฉันมี 2 รูปแบบพื้นฐาน - ลงชื่อเข้าใช้และลงทะเบียนทั้งในหน้าเดียวกัน ตอนนี้ฉันไม่มีปัญหากับการลงชื่อเข้าใช้ในรูปแบบการป้อนอัตโนมัติแต่แบบฟอร์มการสมัครอัตโนมัติก็เติมเต็มเช่นกันและฉันไม่ชอบ

นอกจากนี้สไตล์ของฟอร์มจะมีพื้นหลังสีเหลืองซึ่งฉันไม่สามารถจัดการเพื่อแทนที่และฉันไม่ต้องการใช้ inline CSS ในการทำเช่นนั้น ฉันจะทำอย่างไรเพื่อให้พวกเขาหยุดเป็นสีเหลืองและ (อาจจะ) การเติมอัตโนมัติ? ขอบคุณล่วงหน้า!

html  css  input  autofill 
— casraf
แหล่งที่มา
4
คุณกำลังถามคำถามสองข้อที่นี่จริง ๆ วิธีปิดใช้งานป้อนฟอร์มอัตโนมัติ - และ - วิธีการแทนที่พื้นหลังสีเหลืองเมื่อเปิดใช้งานการป้อนฟอร์มอัตโนมัติหรือไม่ ยังไม่ชัดเจนจนกว่าฉันจะอ่านความคิดเห็นทั้งหมดในคำตอบด้านล่าง คุณอาจต้องการพิจารณาแก้ไขคำถามของคุณ (โดยเฉพาะอย่างยิ่งเมื่อคุณได้รับรางวัลมากมาย)
— benzado
คุณถูกแก้ไข หรือรุ่นขี้เกียจของมันต่อไป
— casraf
1
ในฐานะผู้ใช้ของแบบฟอร์มฉันเกลียดที่จะทำให้การใช้งานของฉันพิการเนื่องจากความต้องการในการมองเห็นของคุณโดยบังคับให้การเติมเต็มอัตโนมัติและการไฮไลต์ปิดอยู่ ปล่อยให้ผู้ใช้ปิดสิ่งนี้ไม่ใช่คุณ ทิ้งประสบการณ์การท่องเว็บของฉันไว้คนเดียว
— Byran Zaugg
นั่นคือสิ่งที่ฉันเพียงปิดใช้งานการเติมข้อความอัตโนมัติในแบบฟอร์มการลงทะเบียนซึ่งโดยทั่วไปไม่ควรมีการเติมข้อความอัตโนมัติปกติข้อมูลความสมบูรณ์จะถูกสร้างขึ้นเมื่อคุณลงชื่อสมัครใช้เท่านั้น สำหรับรูปแบบการเข้าสู่ระบบฉันต้องการเปิดใช้งานการเติมข้อความอัตโนมัติ แต่เพียงปิดการใช้งานสีใบ้ที่มันใส่ไว้ในช่องใส่เพราะข้อความภายในไม่สามารถอ่านได้ - พื้นหลังเป็นสีเหลืองและสีข้อความเป็นสีขาว (พื้นหลังดั้งเดิมเป็นสีเทาเข้ม) .
— casraf
1
อาจเป็นไปได้ซ้ำกับการป้อนฟอร์มอัตโนมัติ
— zzzzBov

คำตอบ:

163

สำหรับการเติมข้อความอัตโนมัติคุณสามารถใช้:

<form autocomplete="off">

เกี่ยวกับปัญหาการระบายสี:

จากภาพหน้าจอของคุณฉันจะเห็นว่า webkit สร้างสไตล์ดังต่อไปนี้:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) เนื่องจาก # id-styles สำคัญยิ่งกว่า. class styles ดังต่อไปนี้อาจใช้งานได้:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) หากวิธีนี้ใช้ไม่ได้ผลคุณสามารถลองกำหนดสไตล์ผ่านทางโปรแกรมจาวาสคริปต์ 

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) ถ้าไม่ได้ผลคุณจะต้อง :-)พิจารณาเรื่องนี้: สิ่งนี้จะไม่ซ่อนสีเหลือง แต่จะทำให้ข้อความอ่านได้อีกครั้ง

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) โซลูชัน css / javascript:

CSS:

input:focus {
    background-position: 0 0;
}

และจาวาสคริปต์ต่อไปนี้จะต้องมีการเรียกใช้ onload:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

เช่น:

<body onload="loadPage();">

โชคดี :-)

5) หากไม่มีงานใด ๆ ข้างต้นลองลบองค์ประกอบการป้อนข้อมูลให้ทำการโคลนนิ่งจากนั้นวางองค์ประกอบที่โคลนกลับมาที่หน้า (ใช้งานได้กับ Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) จากที่นี่ :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
— Phil Rykoff
แหล่งที่มา
(1) ไม่ทำงาน ฉันจะลอง (2) เมื่อฉันกลับบ้าน หวังว่า JS สามารถลบล้างสิ่งนี้ได้ ขอบคุณ :)
— casraf
1
(4) ลบสีเหลืองแน่นอน: เส้นขอบโฟกัส
— ruruskyi
หากบิตสุดท้ายไม่ได้ผลสำหรับคุณและคุณรู้วิธีการใช้งานจาวาสคริปต์ (มีรหัสที่ถูกต้อง ฯลฯ ) คุณอาจมีปัญหาที่ฉันมีฉันใช้ jquery mobile ด้วยเหตุผลบางประการและสิ่งนี้จะเกิดขึ้นในภายหลังและแทนที่อินพุต มันดูเหมือน. ดังนั้นสิ่งที่ฉันทำคือตั้งช่วงเวลาซึ่งโคลนทุก 50 มิลลิวินาที (มันทำงานหลังจาก 400 มิลลิวินาทีโดยใช้ setTimeout แต่ฉันไม่ต้องการเสี่ยงต่อการเชื่อมต่อที่ช้า) และหลังจากนั้นหนึ่งวินาทีช่วงเวลาจะถูกลบออก:code
— Mathijs Segers
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— Mathijs Segers
ฉันมีปัญหาคล้ายกันกับ Safari ใน Mavericks แต่เมื่อฉันใช้วิธีที่ 5 พวกเขาจะทำมันออกมาเป็นเวลาหนึ่งวินาที (หรือสามวินาทีเมื่อฉันตั้งค่าการหมดเวลาเป็น 3000) จากนั้นเบราว์เซอร์ชนะและฉันได้เปิดใช้งานการเติมข้อความอัตโนมัติ ในกรณีที่ฉันใช้งานฉันขอชื่อผู้ใช้ / รหัสผ่านสำหรับไซต์อื่นเพื่อให้ฉันสามารถดึงข้อมูลจากเว็บไซต์อื่นได้ดังนั้นฉันจึงไม่ต้องการให้ผู้ใช้และรหัสผ่านที่ใช้สำหรับไซต์ของฉันทำการป้อนอัตโนมัติ มีความคิดเกี่ยวกับเรื่องนี้ (นอกเหนือจากการลงโทษของ # 3 เดิม)?
— แจ็ค RG
218

หลอกด้วยเงาภายในที่ "แข็งแกร่ง":

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— Tamás Pap
แหล่งที่มา
10
นี่ฉลาดจริงๆ :)
— Jordan Gray
3
+1000 (ถ้าทำได้) ใช่ฉันไม่สามารถหาวิธีอื่นได้ นี่มันรบกวนเว็บคิทจริงๆ ...
— o_O
1
ที่น่ากลัวนี้ควรจะเป็นจำนวนหนึ่งคำตอบที่ง่ายและมีประสิทธิภาพ
— Pixelomo
3
มันยอดเยี่ยมมากในการใช้งานและสร้างสรรค์จริงๆ แต่มันทำให้ฉันนึกถึงการแฮ็กเก่าของ IE6 และสิ่งที่คล้ายกัน คุณชอบ google เพื่อให้พารามิเตอร์: -webkit-autofill และไม่อนุญาตให้ผู้ออกแบบแทนที่ค่าเริ่มต้นใช่ไหม
— squarecandy
1
การให้ตัวเลือกสีที่ไม่สามารถปรับแต่งได้นั้นไม่ได้ช่วยในเรื่องการใช้งานและการเข้าถึงได้ง่าย ข้อกังวลเหล่านั้นยังคงอยู่ในมือของนักพัฒนายกเว้นแฮ็คที่น่าผิดหวังใน Chrome ไม่มีใครสามารถตำหนิความตั้งใจของผู้พัฒนา Chrome ได้เพียงแค่ผลลัพธ์
— Lunster
25

เพิ่มกฎ CSS นี้และสีพื้นหลังสีเหลืองจะหายไป :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
แหล่งที่มา
1
สิ่งนี้ใช้ได้สำหรับฉัน - ขอบคุณ! (แม้ว่าฉันต้องการเปลี่ยนสีขาวเป็นสีที่ฉันต้องการจริง ๆ )
— jennEDVT
2
ชัดเจนคำตอบที่ดีที่สุด
— แบรนดอนแฮร์ริส
16 
<form autocomplete="off">

เบราว์เซอร์ที่ทันสมัยแทบทั้งหมดจะเคารพสิ่งนั้น

— Jason Kester
แหล่งที่มา
7
ยอดเยี่ยม แต่มันแก้ปัญหาที่สำคัญน้อยกว่าเท่านั้น ฉันจะทำให้รถยนต์สมบูรณ์แบบได้อย่างไร แต่เสียwebkit ( prntscr.com/4hkh ) สไตล์ไปเรื่อย ๆ o: ขอบคุณ
— casraf
1
ที่จริงแล้วควรทำทั้งสองอย่าง ช่องจะเปลี่ยนเป็นสีเหลืองเท่านั้นเพื่อแจ้งให้คุณทราบว่า chrome / safari / ff ทำการป้อนอัตโนมัติด้วยรหัสผ่านของคุณ ถ้าคุณบอกว่าไม่เติมมันก็จะไม่มีโอกาสระบายสีด้วย
— Jason Kester
11
ใช่ แต่ดูสิ่งที่ฉันพูดว่า: "ฉันจะทำให้สมบูรณ์อัตโนมัติ แต่สูญเสียสไตล์ webkit shoves"
— casraf
ปัญหาเฉพาะautocompleteคือมันไม่ถูกต้องใน HTML ก่อนรุ่น 5
— Paul D. Waite
15

หลังจากการค้นหา 2 ชั่วโมงดูเหมือนว่า Google Chrome จะยังคงแทนที่สีเหลืองอย่างใด แต่ฉันพบการแก้ไข มันจะทำงานสำหรับโฮเวอร์, โฟกัส ฯลฯ เช่นกัน สิ่งที่คุณต้องทำคือการเพิ่ม!importantมัน

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

นี่จะเป็นการลบสีเหลืองออกจากช่องป้อนข้อมูลอย่างสมบูรณ์

— สวม
แหล่งที่มา
มันใช้งานได้สำหรับฉันที่ไม่มี 1,000px เพียง 0 ทุกหนทุกแห่ง -webkit-box-shadow: 0 0 0 0 white inset! important;
— Luis Lopez
3

คุณยังสามารถเปลี่ยนแอตทริบิวต์ name ขององค์ประกอบแบบฟอร์มของคุณเป็นสิ่งที่สร้างขึ้นเพื่อที่เบราว์เซอร์จะไม่ติดตามมัน HOWEVER firefox 2.x + และ google chrome ดูเหมือนว่าจะมีปัญหาไม่มากนักหาก url คำขอนั้นเหมือนกัน ลองเพิ่มพื้นขอเกลือและชื่อเขตข้อมูลเกลือสำหรับแบบฟอร์มสมัครใช้งาน

อย่างไรก็ตามฉันคิดว่าการเติมข้อความอัตโนมัติ = "ปิด" ยังคงเป็นคำตอบยอดนิยม :)

— Dmitriy Likhten
แหล่งที่มา
3

คุณสามารถปิดใช้งานการเติมข้อความอัตโนมัติในรูปแบบ HTML5 (ผ่านautocomplete="off") แต่คุณไม่สามารถแทนที่การเน้นของเบราว์เซอร์ได้ คุณสามารถลองล้อเล่นกับ::selectionใน CSS (เบราว์เซอร์ส่วนใหญ่ต้องการคำนำหน้าของผู้จัดจำหน่ายเพื่อให้ใช้งานได้) แต่นั่นอาจไม่ช่วยคุณเช่นกัน

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

— อลันพลัม
แหล่งที่มา
3

บางครั้งการเติมข้อความอัตโนมัติบนเบราว์เซอร์ยังคงการเติมข้อความอัตโนมัติเมื่อคุณมีรหัสใน<form>องค์ประกอบ

ฉันพยายามวางมันลงใน<input>องค์ประกอบด้วยและมันก็ทำงานได้ดีขึ้น

<form autocomplete="off">  AND  <input autocomplete="off">

การสนับสนุนสำหรับแอททริบิวนี้ยังคงอยู่โปรดอ่าน https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

การทำงานอื่น ๆ ที่ฉันพบคือการลบตัวยึดตำแหน่งในช่องป้อนข้อมูลที่แนะนำว่าเป็นอีเมลชื่อผู้ใช้หรือโทรศัพท์ (เช่น "อีเมลของคุณ" "อีเมล" ฯลฯ ")

ป้อนคำอธิบายรูปภาพที่นี่

สิ่งนี้ทำให้เบราว์เซอร์ไม่ทราบว่าเป็นฟิลด์ประเภทใดจึงไม่พยายามเติมข้อความอัตโนมัติ

— andstud.io
แหล่งที่มา
สิ่งที่ฉันชอบเกี่ยวกับเรื่องนี้คือคนส่วนใหญ่ที่ไม่เห็นด้วยกับแบบฟอร์มทั้งหมดที่ไม่ได้กรอกในการโหลดหน้าเว็บ (เช่นพื้นที่ข้อความยาว) แต่อนุญาตให้นักพัฒนาซอฟต์แวร์ป้องกันองค์ประกอบบางอย่างจากการกรอก (เช่นหมายเลขบัตรธนาคาร) แม้ว่าการสนับสนุนคุณลักษณะนี้จะยุติลงแล้วก็ตาม
— Luke Madhanga
1

หากอยู่ในช่องป้อนข้อมูลคุณกำลังพยายาม "ยกเลิกสีเหลือง" ...

  1. ตั้งค่าสีพื้นหลังด้วย css ... สมมุติว่า #ccc (สีเทาอ่อน)
  2. เพิ่มค่า = "บางครั้ง" ซึ่งเติมฟิลด์ชั่วคราวด้วย "someext"
  3. (ไม่บังคับ) เพิ่ม javascript เล็ก ๆ น้อย ๆ เพื่อให้ "บางครั้ง" ชัดเจนเมื่อคุณใส่ข้อความจริง

ดังนั้นอาจมีลักษณะเช่นนี้:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— ม้าขาว
แหล่งที่มา
1

วิธีนี้ช่วยแก้ไขปัญหาทั้งใน Safari และ Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— Arjan
แหล่งที่มา
1
ฉันเชื่อว่ามันจะเป็นไปไม่ได้ แต่มันจะไม่รุนแรงสักหน่อยที่จะทำเช่นนี้ 50 ครั้งต่อวินาที ฉันรู้ว่ามันใช้งานได้และจะไม่ช้าเกินไป แต่ดูเหมือนจะมากเกินไป
— Mathijs Segers
0

ภาพหน้าจอที่คุณเชื่อมโยงเพื่อบอกว่า WebKit ใช้ตัวเลือกinput:-webkit-autofillสำหรับองค์ประกอบเหล่านั้น คุณได้ลองใส่สิ่งนี้ลงใน CSS แล้วหรือยัง?

input:-webkit-autofill {
    background-color: white !important;
}

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

— benzado
แหล่งที่มา
0

formองค์ประกอบมีแอตทริบิวต์ที่คุณสามารถตั้งค่าให้autocomplete offในฐานะที่เป็น CSS !importantคำสั่งหลังจากที่ทรัพย์สินช่วยให้มันจากการ overriden:

background-color: white !important;

มีเพียง IE6 เท่านั้นที่ไม่เข้าใจ

ถ้าฉันเข้าใจผิดคุณก็มีoutlineคุณสมบัติที่คุณจะพบว่ามีประโยชน์

— zneak
แหล่งที่มา
2
Chrome ดูเหมือนจะไม่สนใจ! สำคัญเมื่อป้อนข้อมูลอัตโนมัติป้อนข้อมูล
— Torandi
@Torandi อาจเป็นเพราะสไตล์ชีทของเอเจนต์ผู้ใช้ การตั้งค่าจากสไตล์ผู้ใช้ - เอเจนต์ควรใช้ครั้งสุดท้ายเว้นแต่จะมี!importantคำสั่งซึ่งในกรณีนี้จะมีความสำคัญเหนือสิ่งอื่นใด คุณควรตรวจสอบสไตล์ชีทตัวแทนผู้ใช้ของคุณ (แม้ว่าฉันไม่รู้ว่าจะหาได้ที่ไหน)
— zneak
0

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

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
— อาดัม
แหล่งที่มา
0

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

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

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
— Ernests Karlsons
แหล่งที่มา
0

โซลูชัน javascript อย่างง่ายสำหรับเบราว์เซอร์ทั้งหมด:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

อินพุตโคลนรีเซ็ตคุณสมบัติและซ่อนอินพุตต้นฉบับ การหมดเวลาเป็นสิ่งจำเป็นสำหรับ iPad

— เล็น
แหล่งที่มา
0

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

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— Kt Mack
แหล่งที่มา
0

ฉันอ่านเธรดจำนวนมากแล้วลองใช้โค้ดหลายชิ้น หลังจากรวบรวมทุกสิ่งนั้นวิธีเดียวที่ฉันพบว่าล้างฟิลด์ล็อกอินและรหัสผ่านอย่างหมดจดและรีเซ็ตพื้นหลังเป็นสีขาวมีดังนี้:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

รู้สึกอิสระที่จะแสดงความคิดเห็นฉันเปิดให้ทุกการปรับปรุงถ้าคุณพบบางอย่าง

— TwystO
แหล่งที่มา
0

เบราว์เซอร์สมัยใหม่ไม่สนับสนุนการปิดการเติมข้อความอัตโนมัติอัตโนมัติ วิธีที่ง่ายที่สุดในการแก้การเติมข้อความอัตโนมัติที่ฉันพบคือการติดตามด้วย HTML และ JS เล็กน้อย สิ่งแรกที่ต้องทำคือเปลี่ยนประเภทของอินพุตใน HTML จาก 'รหัสผ่าน' เป็น 'ข้อความ'

<input class="input input-xxl input-watery" type="text" name="password"/>

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

หลังจากนั้นให้ผูกเหตุการณ์ focusin กับฟิลด์รหัสผ่านเช่น ในกระดูกสันหลัง:

'focusin input[name=password]': 'onInputPasswordFocusIn',

ในonInputPasswordFocusInเพียงแค่เปลี่ยนประเภทของเขตข้อมูลของคุณเป็นรหัสผ่านโดยการตรวจสอบง่าย ๆ :

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

แค่นี้แหละ!

UPD: สิ่งนี้ไม่สามารถใช้งานได้กับ JavaSciprt ที่ถูกปิดใช้งาน

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

— volodymyr3131
แหล่งที่มา
การเติมข้อความอัตโนมัติที่ดีนั้นเป็นส่วนหนึ่งของมาตรฐานแม้ว่าการใช้งานและการใช้งานอาจแตกต่างกันไป นอกจากนี้การเปลี่ยนประเภทอินพุตใน IE ล้มเหลวอย่างน่าทึ่งซึ่งเป็นสาเหตุที่ jQuery บล็อก แต่โดยทั่วไปแล้วมันไม่ใช่ความคิดที่ดีถ้าคุณวางแผนที่จะสนับสนุน IE developer.mozilla.org/en-US/docs/Web/Security/ …
— casraf
@casraf ขออภัยมันเป็นส่วนหนึ่งของมาตรฐาน แต่มันไม่สามารถใช้ได้กับทุกเบราว์เซอร์ที่ทันสมัยตามที่มันต้องการดังนั้นมันจะไม่ทำสิ่งที่มันถูกคิดค้นขึ้นมา ใน EDGE ใช้งานได้ดีเกี่ยวกับรุ่นก่อนหน้าไม่สามารถบอกอะไรได้เลย (
— volodymyr3131
จริงมันไม่ได้ดำเนินการทุกที่ ปัญหายังคงอยู่ - ขึ้นอยู่กับว่าคุณต้องการสนับสนุน IE นานแค่ไหนก่อนที่จะถึง v 11 ฉันไม่เชื่อว่าคุณจะสามารถเปลี่ยนประเภทอินพุตได้ หากคุณไม่กังวลเกี่ยวกับเวอร์ชันเก่าคุณอาจใช้งานได้ดีเช่นเดียวautocomplete=offกับใน FF, Chrome ชั่วขณะและ IE ในเวอร์ชันก่อนหน้านี้
— casraf
ฉันพยายามใช้การเติมข้อความอัตโนมัติ = ปิดทั้งสำหรับอินพุตและแบบฟอร์มและ Chrome ยังคงกรอกข้อมูลการลงชื่อสมัครใช้และลงชื่อเข้าใช้ในแบบฟอร์ม (นี่เป็นเพียงเวทมนตร์แปลก ๆ เพราะตามความคิดเห็นในบางกรณีการทำงานและใน บางอย่างไม่ได้ =)
— volodymyr3131
ฉันรู้ว่ามาตรฐานเหล่านี้ไม่ได้มีการปฏิบัติตามอย่างสม่ำเสมอ มันเป็นความอัปยศทำให้ชีวิตเราหนักขึ้น :(
— casraf
0

ฉันต้องเปลี่ยนสีข้อความเป็นสีเข้มกว่า (ดูสีของชุดรูปแบบ StackOverflow สีเข้ม)

จบลงด้วยการผสมผสานของ @ Tamás Pap, @MCBL และ @ don ของโซลูชัน:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
— อังเดร
แหล่งที่มา
-3

ทำไมไม่ลองใส่มันลงใน CSS:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

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

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

— คริส
แหล่งที่มา
ไม่สามารถใช้งานได้ทั้งโครเมี่ยมและซาฟารี สไตล์เป็นinput:-webkit-autofillและinput --webkit-autocompleteก็ไม่มีอยู่จริง
— ruruskyi
@EliseuMonar: ฉันค่อนข้างแน่ใจว่าฉันไม่ได้โกหก แต่ไม่สามารถจำรายละเอียดของวิธีการที่ฉันทดสอบ รหัสอาจถูกพิมพ์จากหน่วยความจำไม่ใช่คัดลอก / วางดังนั้นเติมข้อความอัตโนมัติกับป้อนอัตโนมัติ? ฉันไม่รู้.
— กริช
-3

ปัญหาจริงที่นี่คือ Webkit (Safari, Chrome, ... ) มีข้อผิดพลาด เมื่อมี [ฟอร์ม] มากกว่าหนึ่งรายการในหน้าแต่ละรายการจะมี [input type = "text" name = "foo" ... ] (เช่นมีค่าเดียวกันสำหรับแอตทริบิวต์ 'name') จากนั้นเมื่อผู้ใช้ส่งคืน ไปที่หน้าการป้อนอัตโนมัติจะทำในฟิลด์ป้อนข้อมูลของ FIRST [ฟอร์ม] บนหน้าไม่ใช่ใน [ฟอร์ม] ที่ส่ง ครั้งที่สอง NEXT [ฟอร์ม] จะถูกป้อนอัตโนมัติและอื่น ๆ เฉพาะ [ฟอร์ม] ที่มีช่องข้อความที่มีชื่อเดียวกันเท่านั้นที่จะได้รับผลกระทบ

สิ่งนี้ควรรายงานต่อผู้พัฒนา Webkit

Opera ป้อนข้อมูลอัตโนมัติให้ถูกต้อง [แบบฟอร์ม]

Firefox และ IE ไม่ได้ป้อนอัตโนมัติ

ดังนั้นฉันพูดอีกครั้ง: นี่เป็นข้อผิดพลาดใน Webkit

— ต่อ Lindberg
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.