এইচটিএমএল / সিএসএসের সাথে ব্রাউজারের ফর্ম-ফিলিং এবং ইনপুট হাইলাইট করে ওভাররাইড করুন

139

আমার দুটি বেসিক ফর্ম রয়েছে - সাইন ইন করুন এবং সাইন আপ করুন, একই পৃষ্ঠায় উভয়ই। এখন, সাইন ইন ফর্মটি অটো পূরণে আমার কোনও সমস্যা নেই,তবে সাইন আপ ফর্মটি অটোও পূরণ করে এবং আমি এটি পছন্দ করি না।

এছাড়াও, ফর্ম শৈলীর একটি হলুদ পটভূমি পাওয়া যায় যা আমি ওভাররাইড করতে পারি না এবং এটি করার জন্য আমি ইনলাইন সিএসএস ব্যবহার করতে চাই না। তাদের রঙিন হলুদ হওয়া বন্ধ করতে আমি কী করতে পারিএবং (সম্ভবত) অটো ফিলিং? আগাম ধন্যবাদ!

html  css  input  autofill 
— casraf
সূত্র
4
আপনি এখানে সত্যিই দুটি প্রশ্ন জিজ্ঞাসা করছেন: ফর্ম অটোফিল কীভাবে অক্ষম করবেন? -অ্যান্ড- ফর্ম অটোফিল সক্ষম হয়ে গেলে কীভাবে হলুদ পটভূমি ওভাররাইড করবেন? আমি নীচের উত্তরে সমস্ত মন্তব্য না পড়া পর্যন্ত এটি পরিষ্কার ছিল না। আপনি আপনার প্রশ্ন সম্পাদনা বিবেচনা করতে চাইতে পারেন (বিশেষত যেহেতু আপনি কোনও অনুগ্রহের অফারটি দিয়েছেন)।
— বেনজাদো
আপনি ঠিক, সম্পাদিত। বা যাইহোক এটির একটি অলস সংস্করণ।
— কাসাফ
1
ফর্মটির ব্যবহারকারী হিসাবে, অটো সম্পূর্ণরূপে জোর করে এবং হাইলাইট বন্ধ করে আপনার ভিজ্যুয়াল পছন্দের কারণে আমি আমার ব্যবহারযোগ্যতা পঙ্গু করতে পছন্দ করি না। ব্যবহারকারী এটি বন্ধ করুন, আপনি না। আমার ব্রাউজিংয়ের অভিজ্ঞতাটি একা ছেড়ে দিন।
— বায়রান জৌগ
এই জিনিসটি, আমি কেবল নিবন্ধকরণ ফর্মটিতে স্বয়ংসম্পূর্ণকে অক্ষম করেছিলাম, যার মূলত নিয়মিত স্বয়ংসম্পূর্ণতা থাকা উচিত নয়, আপনি সাইন আপ করার পরে সম্পূর্ণতার তথ্যটি কেবল তৈরি হয়। লগইন ফর্মের জন্য, আমি স্বতঃপূরণ চালু রাখতে চাই, তবে কেবল যে মূক রঙটি এটি ইনপুট ক্ষেত্রগুলিতে রাখে তা অক্ষম করে কারণ অভ্যন্তরের পাঠ্যটি অপঠনযোগ্য হয়ে যায় - পটভূমিটি হলুদ এবং পাঠ্যের রঙ সাদা (মূল পটভূমি গা dark় ধূসর) ।
— ক্যাসাফ
1
— অটোফিল

উত্তর:

163

স্বতঃসম্পূর্ণতার জন্য, আপনি ব্যবহার করতে পারেন:

<form autocomplete="off">

বর্ণ-সমস্যা সম্পর্কিত:

আপনার স্ক্রিনশট থেকে আমি দেখতে পাচ্ছি যে ওয়েবকিট নিম্নলিখিত শৈলীটি উত্পন্ন করে:

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

1) # আইডি-স্টাইলগুলি ক্লাস শৈলীর চেয়েও বেশি গুরুত্বপূর্ণ, নিম্নলিখিতগুলি কাজ করতে পারে :

#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 / জাভাস্ক্রিপ্ট সমাধান:

CSS:

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

এবং নিম্নলিখিত জাভাস্ক্রিপ্টটি ওভারলোড চালাতে হবে:

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();">

শুভকামনা :-)

৫) উপরের কোনও কাজ যদি ইনপুট উপাদানগুলিকে ক্লোনিং করে মুছে ফেলার চেষ্টা না করে, তবে ক্লোন করা উপাদানগুলি পৃষ্ঠায় ফিরে রেখে (সাফারি .0.০.৩ এ কাজ করে):

<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);
        });
    });
}
— ফিল রাইকফ
সূত্র
(1) কাজ করে না। আমি চেষ্টা করব (2) যখন আমি বাড়ি ফিরে আসব; আশা করি জেএস এটিকে ওভাররাইড করতে পারে; ধন্যবাদ :)
— ক্যাসাফ
1
(4) অবশ্যই হলুদ সরান: ফোকাস সীমানা।
— ruruskyi
যদি শেষ বিটটি আপনার পক্ষে কাজ করে না, এবং জাভাস্ক্রিপ্ট কীভাবে কাজ করে তা আপনি জানেন (আইডির সঠিক অধিকার ইত্যাদি পেয়েছে) আপনার আমার সমস্যাটি থাকতে পারে, আমি কিছু কারণে jquery মোবাইল ব্যবহার করছি এবং এটি পরে ইনসাইটগুলি প্রতিস্থাপন করে এবং ইনপুটগুলি প্রতিস্থাপন করে এটা দেখতে. সুতরাং আমি যা করেছি তা অন্তরাল সেট করে যা প্রতি 50 এমএসে এটি ক্লোন করে (এটি সেটটাইমআউট ব্যবহার করে 400 মিটার পরে কাজ করেছে তবে আমি ধীর সংযোগগুলি ঝুঁকি নিতে চাই না)। এবং এক সেকেন্ডের পরে ব্যবধানটি সরিয়ে ফেলা হয়:code
— ম্যাথিজস সেগারস
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);
— ম্যাথিজস সেগার্স
মাভারিক্সে সাফারি নিয়ে আমার একইরকম সমস্যা হচ্ছে। তবে যখন আমি পদ্ধতি 5 ব্যবহার করি তখন তারা এটি এক সেকেন্ডের জন্য (বা তিন সেকেন্ডের সময়সীমা নির্ধারণ করে যখন আমি 3000 নির্ধারণ করি) এবং তারপরে ব্রাউজারটি জিতে যায় এবং আমি স্বতঃপূরণ চালু করে ফেলেছি। আমার ব্যবহারের ক্ষেত্রে, আমি ব্যবহারকারীকে অন্য সাইটের জন্য তাদের ব্যবহারকারীর নাম / পাসওয়ার্ডের জন্য জিজ্ঞাসা করছি যাতে আমি অন্য সাইট থেকে তথ্য টানতে পারি, তাই আমি অবশ্যই এটি আমার সাইটের জন্য ব্যবহারকারীর নাম এবং পাসওয়ার্ডটি স্বতঃপূর্ণ করতে চাই না। এ সম্পর্কে কোনও চিন্তা (মূল # 3 এর পরিণাম ছাড়াও)?
— জ্যাক আরজি
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;
}
— ট্যামস পাপ
সূত্র
10
এটা সত্যিই চালাক। :)
— জর্দান গ্রে
3
+1000 (যদি আমি পারতাম) হ্যাঁ আমি এটি করার জন্য অন্য কোনও উপায় অনুভব করতে পারি না। এটি ওয়েবকিটের সত্যই অনুপ্রবেশকারী ...
— o_O
1
— আশ্চর্যজনক
3
এটি দুর্দান্ত কাজ করে এবং এটি সত্যই সৃজনশীল। তবে এটি আমাকে পুরানো আই 6 হ্যাক এবং এর মতো স্মরণ করিয়ে দেয়। গুগলের কিন্ডা ক্রেপি আমাদের একটি দেওয়ার জন্য: -উবকিট-অটোফিল প্যারামিটার এবং ডিজাইনারদের ডিফল্টকে ওভাররাইড করতে দেয় না, তাই না?
— স্কোরকাণ্ডি
1
রঙিন পছন্দ সরবরাহ করা যা কাস্টমাইজ করা যায় না তা ব্যবহারযোগ্যতা বা অ্যাক্সেসযোগ্যতায় সহায়তা করে না। ক্রোমের এই হতাশাজনক হ্যাক বাদে এই উদ্বেগগুলি এখনও পুরোপুরি দেবের হাতে। কেউই ক্রোম ডেভেলসের উদ্দেশ্যটিকে ভুল করতে পারে না, কেবল ফলাফল।
— লুনস্টার 11
25

এই সিএসএস বিধি যুক্ত করুন, এবং হলুদ পটভূমির রঙ অদৃশ্য হয়ে যাবে। :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
সূত্র
1
এটি আমার জন্য কাজ করেছে - ধন্যবাদ! (যদিও আমার
— পছন্দসই
2
পরিষ্কারভাবে সেরা উত্তর।
— ব্র্যান্ডন হ্যারিস
16 
<form autocomplete="off">

খুব সুন্দর সমস্ত আধুনিক ব্রাউজার এটি সম্মান করবে।

— জেসন কেস্টার
সূত্র
7
দুর্দান্ত, তবে এটি কেবল কম গুরুত্বপূর্ণ সমস্যা সমাধান করে; আমি কীভাবে স্বয়ংক্রিয় সম্পূর্ণ রাখতে পারি তবে শরীকটি ( prntscr.com/4hkh ) হারিয়ে ফেলতে পারি তার গলাটি কীভাবে বন্ধ করবে? ও: ধন্যবাদ যদিও
— 22-25 এ কাসাফ
1
আসলে, এটি উভয় করা উচিত। ক্রোম / সাফারি / এফএফ এটি আপনার পাসওয়ার্ড দিয়ে স্বয়ংক্রিয়ভাবে পূরণ করেছে তা আপনাকে জানাতে বাক্সটি কেবল হলুদ হয়ে যায়। আপনি যদি এটি পূরণ না করতে বলে থাকেন তবে এটি রঙিন করার সুযোগ পাবেন না
— জেসন কেস্টার
11
হ্যাঁ, তবে আমি কী বলেছিলাম তা দেখুন: "আমি কীভাবে স্বয়ংক্রিয় সম্পূর্ণ রাখতে পারি তবে শৈলীর ওয়েবকিটের
— ঝাঁকুনিটি
কেবল সমস্যাটি autocompleteহ'ল এটি সংস্করণ 5 এর আগে এইচটিএমএলে অবৈধ
— পল ডি ওয়েট
15

২ ঘন্টা অনুসন্ধানের পরেও মনে হয় গুগল ক্রোম এখনও কোনওভাবে হলুদ বর্ণকে ওভাররাইড করে তবে আমি ঠিক করেছিলাম। এটি হোভার, ফোকাস ইত্যাদির জন্যও কাজ করবে। আপনাকে যা করতে হবে তা হ'ল !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;
}

এটি সম্পূর্ণরূপে ইনপুট ক্ষেত্রগুলি থেকে হলুদ রঙ মুছে ফেলবে

— ডন
সূত্র
এটি 1000px ছাড়াই আমার জন্য কাজ করে, কেবল 0 সর্বত্র,-ওয়েবকিট-বাক্স-ছায়া: 0 0 0 0 সাদা ইনসেট! গুরুত্বপূর্ণ;
— লুইস লোপেজ
3

আপনি নিজের ফর্ম উপাদানগুলির নাম বৈশিষ্ট্যটি উত্পন্ন কিছু হিসাবে পরিবর্তন করতে পারেন যাতে ব্রাউজারটি এটির নজর রাখে না। অনুরোধ ইউআরএলটি যদি অভিন্ন হয় তবে ফায়ারফক্স ২.x + এবং গুগল ক্রোম এর সাথে খুব বেশি সমস্যা নেই বলে মনে হচ্ছে। সাইন-আপ ফর্মের জন্য মূলত একটি লবণের অনুরোধ পরম এবং একটি লবণের ক্ষেত্রের নাম যুক্ত করার চেষ্টা করুন।

তবে আমি মনে করি স্বতঃপূরণ = "বন্ধ" এখনও শীর্ষ সমাধান রয়েছে :)

— দিমিত্রি লিখটেন
সূত্র
3

আপনি HTML5 (এর মাধ্যমে autocomplete="off") হিসাবে স্বতঃ-সমাপ্তি অক্ষম করতে পারবেন , তবে আপনি ব্রাউজারের হাইলাইটাকে ওভাররাইড করতে পারবেন না। আপনি ::selectionসিএসএসের সাথে গোলযোগের চেষ্টা করতে পারেন (বেশিরভাগ ব্রাউজারের এটি কাজ করার জন্য একজন বিক্রেতা উপসর্গের প্রয়োজন হয়) তবে এটি সম্ভবত আপনাকে সাহায্য করবে না।

ব্রাউজার বিক্রেতাকে নির্দিষ্ট করে ওভাররাইড করার কোনও বিক্রেতা-নির্দিষ্ট পদ্ধতি প্রয়োগ না করা পর্যন্ত আপনি এমন স্টাইলগুলি সম্পর্কে কিছু করতে পারবেন না যা ইতিমধ্যে ব্যবহারকারীর জন্য সাইটের স্টাইলশিটকে ওভাররাইড করার উদ্দেশ্যে তৈরি হয়েছে। এগুলি সাধারণত আপনার স্টাইলশিট প্রয়োগ করার পরে প্রয়োগ করা হয় এবং ! 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
সূত্র
আমি এটি সম্পর্কে যা পছন্দ করি তা হ'ল বেশিরভাগ লোকেরা পুরো ফর্মটি একটি পৃষ্ঠা পুনরায় লোড (যেমন একটি দীর্ঘ পাঠ্য অঞ্চল) এ পূরণ না করাকে প্রশংসা করবে না, তবে বিকাশকারীকে নির্দিষ্ট উপাদানগুলিকে (উদাঃ ব্যাঙ্ক কার্ড নম্বর) ভর্তি হতে আটকাতে দেয়। বিরক্তিকর হলেও, এই গুণাবলীর জন্য সমর্থন বন্ধ হচ্ছে
— লুক মাধাঙ্গা
1

যদি এটি ইনপুট ক্ষেত্রে থাকে আপনি "আন-হলুদ" চেষ্টা করছেন ...

  1. CSS এর সাথে একটি পটভূমি রঙ সেট করুন ... আসুন # সিসি (হালকা ধূসর) বলুন।
  2. মান = "সামান্য পাঠ্য" যুক্ত করুন যা "সামটেক্সট" দিয়ে অস্থায়ীভাবে ফিল্ডটি পূরণ করে
  3. (alচ্ছিক) আপনি যখন আসল পাঠ্যটি প্রবেশ করতে চলেছেন তখন "কিছুটা" পরিষ্কার করার জন্য একটি সামান্য জাভাস্ক্রিপ্ট যুক্ত করুন।

সুতরাং, এটি দেখতে এটির মতো দেখাবে:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— সাদা ঘোড়া
সূত্র
1

এটি সাফারি এবং ক্রোম উভয়ই সমস্যার সমাধান করে

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 বার করা কি কিছুটা কঠোর হবে না? আমি জানি এটি কাজ করবে এবং খুব ধীর হবে না। তবে কিছুটা বেশি মনে হচ্ছে।
— ম্যাথিজস সেগারস
0

আপনি যে স্ক্রিনশটের সাথে লিঙ্ক করেছেন সেটি বলছে যে ওয়েবকিট input:-webkit-autofillসেই উপাদানগুলির জন্য নির্বাচককে ব্যবহার করছে । আপনি কি এটি নিজের সিএসএসে রাখার চেষ্টা করেছেন?

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

যদি এটি কাজ না করে, তবে সম্ভবত কিছুই করবে না। এই ক্ষেত্রগুলি ব্যবহারকারীকে সতর্ক করতে হাইলাইট করা হয়েছে যে তারা ব্যক্তিগত তথ্য (যেমন ব্যবহারকারীর বাড়ির ঠিকানা) দিয়ে স্বয়ংক্রিয়ভাবে ভরাট হয়েছে এবং এটি যুক্তিযুক্ত হতে পারে যে কোনও পৃষ্ঠাকে গোপন করার অনুমতি দেয় যা সুরক্ষা ঝুঁকির অনুমতি দেয়।

— benzado
সূত্র
0

formউপাদান একটি হয়েছে autocompleteবৈশিষ্ট্য আপনি সেট করতে পারেন যে off। !importantকোনও সম্পত্তির পরে সিএসএসের নির্দেশনা এটিকে ওভাররেড করা থেকে বিরত রাখে:

background-color: white !important;

কেবল আই 6 এটি বুঝতে পারে না।

যদি আমি আপনাকে ভুল বুঝতে পারি তবে এমন outlineসম্পত্তিও রয়েছে যা আপনি দরকারী হিসাবে খুঁজে পেতে পারেন।

— zneak
সূত্র
2
ইনপুট-ফিল্ডগুলি
— স্বয়ংক্রিয়ভাবে পূরণ
@ তোড়ান্দি এটি ব্যবহারকারী-এজেন্ট স্টাইলশিটের কারণে হতে পারে। ব্যবহারকারী-এজেন্ট স্টাইলশীটগুলির সেটিংসের সর্বশেষ প্রয়োগ করা উচিত, যদি না এটির !importantনির্দেশনা থাকে, তবে এই ক্ষেত্রে এটি অন্য সমস্ত কিছুর চেয়ে অগ্রাধিকার গ্রহণ করে। আপনার ব্যবহারকারী এজেন্ট স্টাইলশিটটি পরীক্ষা করা উচিত (যদিও এটি কোথায় পাবেন তা আমি জানি না)।
— zneak
0

আমি গুগল টুলবারের স্বয়ংক্রিয় পরিপূর্ণ বৈশিষ্ট্যটি জাভাস্ক্রিপ্ট দিয়ে অক্ষম করে দেখেছি। এটি অন্য কিছু অটোফিল সরঞ্জামগুলির সাথে কাজ করতে পারে; আমি জানি না এটি স্বতঃপূরণে নির্মিত ব্রাউজারগুলির সাথে সহায়তা করবে কিনা help

<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

অনেক কিছুর চেষ্টা করার পরেও আমি এমন সমাধানের সন্ধান পেয়েছি যা স্বতঃপূর্ণ ফিল্ডগুলিকে নক করে এবং সেগুলি প্রতিলিপি দিয়ে প্রতিস্থাপন করে। সংযুক্ত ইভেন্টগুলি শিথিল না করে আমি আরেকটি (কিছুটা দীর্ঘ) সমাধান নিয়ে এসেছি।

প্রতিটি "ইনপুট" ইভেন্টে এটি দ্রুত জড়িত সমস্ত ইনপুটগুলিতে "পরিবর্তন" ইভেন্টগুলি সংযুক্ত করে। এটি পরীক্ষা করে যদি তারা স্বতঃপূর্ণ হয় illed যদি হ্যাঁ, তবে একটি নতুন পাঠ্য ইভেন্ট প্রেরণ করুন যা ব্রাউজারটিকে ভাববে যে ব্যবহারকারী দ্বারা মান পরিবর্তন করা হয়েছে, যাতে হলুদ পটভূমি সরিয়ে ফেলা যায়।

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);
  }
});
— আর্নেস্টস কার্লসন
সূত্র
0

সমস্ত ব্রাউজারের জন্য সহজ জাভাস্ক্রিপ্ট সমাধান:

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

ক্লোন ইনপুট, বৈশিষ্ট্য পুনরায় সেট করুন এবং আসল ইনপুটটি আড়াল করুন। আইপ্যাডের জন্য টাইমআউট প্রয়োজন

— ফোঁটা
সূত্র
0

যেহেতু ব্রাউজারটি পাসওয়ার্ডের ধরণের ক্ষেত্রগুলি অনুসন্ধান করে, তাই অন্য ফর্মটি আপনার ফর্মের শুরুতে একটি লুকানো ক্ষেত্র অন্তর্ভুক্ত করে:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— কেটি ম্যাক
সূত্র
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

আধুনিক ব্রাউজারগুলি দ্বারা স্বতঃসম্পূর্ণ বন্ধ সমর্থিত নয়। স্বতঃসমাপ্তি সমাধানের সবচেয়ে সহজ উপায় হ'ল এইচটিএমএল এবং জেএস এর সাথে সামান্য ট্র্যাক। প্রথম কাজটি হ'ল এইচটিএমএল ইনপুটটির ধরণটি 'পাসওয়ার্ড' থেকে 'পাঠ্যে' পরিবর্তন করা।

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

উইন্ডো লোড হওয়ার পরে স্বতঃপূরণ শুরু হয়। ঠিক আছে. কিন্তু যখন আপনার ক্ষেত্রের ধরণটি 'পাসওয়ার্ড' নয়, ব্রাউজারটি কোন ক্ষেত্রগুলি পূরণ করতে হবে তা জানে না। সুতরাং, ফর্ম ক্ষেত্রগুলিতে কোনও স্বয়ংক্রিয় পূর্ণতা থাকবে না।

এর পরে, প্রাক্তনের জন্য পাসওয়ার্ড ক্ষেত্রে ইভেন্ট ফোকাসিনকে আবদ্ধ করুন। ব্যাকবোন:

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

ইন onInputPasswordFocusIn, কেবলমাত্র চেক দ্বারা আপনার ক্ষেত্রের প্রকারটি পাসওয়ার্ডে পরিবর্তন করুন:

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

এটাই!

ইউপিডি: এই জিনিসটি অক্ষম করা জাভাস্ক্রিপ্ট নিয়ে কাজ করে না

ইউপিডি 2018 সালে। এছাড়াও কিছু মজার কৌশল খুঁজে পেয়েছে। ইনপুট ক্ষেত্রে কেবল পাঠযোগ্য বৈশিষ্ট্য সেট করুন এবং ফোকাস ইভেন্টে এটি সরান। প্রথমে অটোফিলিং ক্ষেত্রগুলি থেকে ব্রাউজারকে প্রতিরোধ করুন, দ্বিতীয়টি ডেটা ইনপুট দেওয়ার অনুমতি দেবে।

— volodymyr3131
সূত্র
ওয়েল স্বয়ংসম্পূর্ণ হয় যদিও এটা ব্যবহারের & বাস্তবায়ন পরিবর্তিত হতে পারে, মানক অংশ। এছাড়াও, ইনপুট ধরনের পরিবর্তন IE তে দর্শনীয়ভাবেই ব্যর্থ হয়, যার কারণে jQuery এর এটা ব্লক রয়েছে, তবে সাধারণত এটি একটি ভাল ধারণা না যদি তুমি ইন্টারনেট সমর্থন করার জন্য পরিকল্পনা developer.mozilla.org/en-US/docs/Web/Security/...
— casraf
@ কাসাফ দুঃখিত, এটি স্ট্যান্ডআর্টের একটি অংশ, তবে এটি সমস্ত আধুনিক ব্রাউজারে এটি যেমন কাজ করবে তেমন কাজ করে না, সুতরাং এটি যে জিনিসটির জন্য উদ্ভাবিত হয়েছিল তা তা করবে না।
— এজে
সত্য, এটি সর্বত্র প্রয়োগ করা হয়নি। সমস্যা এখনও দাঁড়িয়ে আছে - আপনি IE কে কতটা পিছনে সমর্থন করতে চান তার উপর নির্ভর করে - v 11 এর আগে, আমি বিশ্বাস করি না আপনি ইনপুট ধরণের পরিবর্তন করতে পারবেন। আপনি যদি পুরানো সংস্করণগুলি সম্পর্কে উদ্বিগ্ন না হন, তবে আপনি autocomplete=offএটিও ব্যবহার করতে পারেন , এটি কিছুক্ষণের জন্য এফএফ, ক্রোমে কাজ করে, এবং পূর্ববর্তী সংস্করণ হিসাবে আইই
— কাসাফ
আমি ইনপুট এবং ফর্ম উভয়ের জন্য স্বতঃপূরণ = বন্ধ ব্যবহার করার চেষ্টা করেছি এবং ক্রোম এখনও সাইনআপ পূরণ করে এবং সাইন ইন ডেটা ফর্ম করে (এটি কেবল এক ধরণের অদ্ভুত যাদু, কারণ মন্তব্যের উপর ভিত্তি করে কিছু ক্ষেত্রে এটি কাজ করে এবং কিছু এটি করে না =)
— volodymyr3131
আমি জানি, এই মানগুলি সত্যই ধারাবাহিকভাবে অনুসরণ করা হচ্ছে না। এটি একটি লজ্জাজনক, আমাদের জীবনকে আরও শক্ত করে তোলে :(
— ক্যাসাফ
0

আমাকে পাঠ্যের রঙকে আরও গাer় কিছুতে পরিবর্তন করতে হয়েছিল (স্ট্যাকওভারফ্লো গা dark় থিমের রঙগুলি দেখুন)।

সুতরাং @ ট্যামস পাপ, @ এমসিসিএল এবং @ ডনের সমাধানের সংকর দিয়ে শেষ হয়েছে:

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

কেন এটি কেবল আপনার সিএসএসে রাখবেন না:

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

এটি আপনার সমস্যার যত্ন নেওয়া উচিত। যদিও এটি একটি ব্যবহারযোগ্যতার সমস্যা উত্থাপন করে কারণ এখন ব্যবহারকারী দেখতে পাচ্ছেন না যে ফর্মটি সে / সে অভ্যস্ত হয়ে উঠেছে aut

[সম্পাদনা] এটি পোস্ট করার পরে আমি দেখেছি যে ইতিমধ্যে একটি অনুরূপ উত্তর দেওয়া হয়েছে এবং আপনি এটি সম্পর্কে মন্তব্য করেছিলেন যে এটি কার্যকর হয়নি। আমি কেন এটি বেশিরভাগই দেখতে পাচ্ছি না কারণ এটি পরীক্ষা করার সময় এটি কেন কাজ করেছিল।

— কিরীচ
সূত্র
ক্রোম এবং সাফারি উভয় ক্ষেত্রেই কাজ করে না। শৈলীটি হ'ল input:-webkit-autofillএবং input --webkit-autocompleteসহজভাবে বিদ্যমান নেই
— রুরস্কিই
@ এলিজিউমনার: আমি নিশ্চিত যে আমি মিথ্যা বলছিলাম না, তবে আমি কীভাবে বা কোথায় এটি পরীক্ষা করেছিলাম তার বিশদটি মনে করতে পারছি না। কোডটি নিজেই সম্ভবত মেমরি থেকে টাইপ করা হয়েছিল, অনুলিপি / আটকানো হয়নি, তাই স্বয়ংক্রিয়ভাবে সম্পূর্ণ বনাম অটোফিল? আমি জানিনা.
— ক্রিস
-3

এখানে বাস্তব সমস্যাটি হ'ল ওয়েবকিট (সাফারি, ক্রোম, ...) এ একটি বাগ রয়েছে। পৃষ্ঠাতে যখন একাধিক [ফর্ম] থাকে, তখন প্রতিটি [ইনপুট টাইপ = "পাঠ্য" নাম = "ফু" ...] সহ (যেমন অর্থ 'নামটির জন্য একই মান সহ) থাকে, তখন যখন ব্যবহারকারী ফিরে আসে পৃষ্ঠায় অটোফিল পৃষ্ঠায় FIRST [ফর্ম] এর ইনপুট ক্ষেত্রে করা হবে, প্রেরিত [ফর্ম] এ নয়। দ্বিতীয় বার, নেক্সট [ফর্ম] স্বয়ংক্রিয়ভাবে পূরণ করা হবে, এবং আরও অনেক কিছু। কেবলমাত্র [ফর্ম] একই নাম সহ একটি ইনপুট পাঠ্য ক্ষেত্রটি প্রভাবিত করবে।

এটি ওয়েবকিট বিকাশকারীদের জানাতে হবে।

অপেরা সঠিক ফর্মটি পূরণ করে aut

ফায়ারফক্স এবং আইটি স্বয়ংক্রিয়ভাবে পূরণ করে না।

সুতরাং, আমি আবার বলছি: এটি ওয়েবকিটের একটি বাগ।

— পার লিন্ডবার্গ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.