আমি কীভাবে Chrome কে আমার সাইটের ইনপুট বাক্সগুলি হলুদ করা থেকে থামাব?

Question

ফর্ম জমা দেওয়ার ক্ষেত্রে অন্যান্য পাঠ্য এবং ভিজ্যুয়াল এইডগুলির মধ্যে, বৈধতা যাচাইকরণের পরে, আমি ইন্টারপেক্টের দিকে মনোযোগের প্রয়োজন হিসাবে চিহ্নিত করতে আমার ইনপুট বাক্সগুলিকে লাল রঙ করছি।

ক্রোমে (এবং গুগল টুলবার ব্যবহারকারীদের জন্য) স্বতঃপূরণ বৈশিষ্ট্যটি আমার ইনপুট ফর্মগুলি পুনরায় রঙ করে। এখানে জটিল সমস্যাটি রয়েছে: আমি আমার ফর্মগুলিতে স্বয়ংক্রিয়-সম্পূর্ণ অনুমোদিত হতে চাই, কারণ এটি ব্যবহারকারীদের লগ ইন করতে গতি দেয় / প্রোগ্রামিংয়ে কোডিং এর বিট একটি পৃষ্ঠায় একক প্রভাবিত ইনপুট জন্য স্বয়ংক্রিয় সম্পূর্ণ বন্ধ। এটি সহজভাবে বলতে গেলে এটি একটি প্রধান মাথাব্যথা হবে।

সুতরাং এই সমস্যাটি এড়াতে চেষ্টা করার জন্য, কি ইনপুট বাক্সগুলিকে পুনরায় রঙ করা থেকে ক্রোমকে থামানোর কোনও সহজ পদ্ধতি আছে?

[সম্পাদনা] আমি নীচে! গুরুত্বপূর্ণ পরামর্শটি চেষ্টা করেছিলাম এবং এর কোনও ফল হয়নি। ! গুরুত্বপূর্ণ বৈশিষ্ট্যটি এর জন্য কাজ করবে কিনা তা জানতে আমি এখনও Google সরঞ্জামদণ্ড পরীক্ষা করে দেখিনি।

আমি যতদূর বলতে পারি, স্বতঃপূণ বৈশিষ্ট্য (যা কাজ করে বলে মনে হচ্ছে) ব্যবহার করা ছাড়া অন্য কোনও উপায় নেই।

Comments

এটি কেবল ক্রোমের কোনও সমস্যা নয়। অন্যান্য ব্রাউজারগুলির জন্য গুগল টুলবার ইনপুট ক্ষেত্রগুলির একই "হলুদ" করে।

— কার্লটন জেনকে

আমি আপনার জন্য একটি উত্তর সরবরাহ করেছি যা নীচে কাজ করে।

— জন লিডেগ্রেন

আমি বুঝতে পারছি না যে সবাই কেন আউটলাইন নিয়ে কথা বলছেন: কোনটিই নয়, প্রশ্নটি ইয়েলো পটভূমি সম্পর্কে, কোনও রূপরেখা নয়। এবং সেট আপ করা স্বতঃসম্পূর্ণ বৈশিষ্ট্যটি সমস্যার সমাধান করবে না, যেমন ড্যাভব্যাগ বলেছিলেন যে তিনি চান স্বতঃসম্পূর্ণ কাজটি শুধু হলুদ ব্যাকগ্রাউন্ড নয় work

Answer 1

ফায়ারফক্সে আমি জানি আপনি স্বতঃসিদ্ধ কার্যকারিতা অক্ষম করতে স্বতঃপূরণ = "বন্ধ" বৈশিষ্ট্যটি ব্যবহার করতে পারেন। যদি এটি ক্রোমে কাজ করে (পরীক্ষা না করে), ত্রুটি দেখা দিলে আপনি এই বৈশিষ্ট্যটি সেট করতে পারেন।

এটি একক উপাদান উভয়ের জন্যই ব্যবহার করা যেতে পারে

<input type="text" name="name" autocomplete="off">

... পাশাপাশি পুরো ফর্মের জন্য

<form autocomplete="off" ...>

Comments

"আমি / যখন কোনও ত্রুটি ঘটেছে তবে স্বতঃপূরণ বৈশিষ্ট্যটি বন্ধ করে দেওয়ার সক্ষমতা যাচাই করতে যাচ্ছি, তবে কোনও পৃষ্ঠায় একক প্রভাবিত ইনপুটটির জন্য স্বয়ংক্রিয়ভাবে সম্পূর্ণ স্বয়ংক্রিয়ভাবে বন্ধ করে দেওয়া কোডিংয়ের জটিল বিষয়" "

— ডেভ রুটলেজ

হি ... হ্যাঁ, আপনাকে ধন্যবাদ, যদিও আমি মনে করি আমার এখনও ক্রোমে চেক করা দরকার, তাই না?

— ডেভ রুটলেজ

<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>

— রেলগুলি

দুঃখের সাথে বলছি যে এটি আমাকে সাহায্য করেনি

— এমআইসলাম

Answer 2

সিএসএস রূপরেখার সম্পত্তি কারও কাছে সেট করুন না।

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

ব্রাউজারের পাশাপাশি একটি ব্যাকগ্রাউন্ড রঙ যুক্ত হতে পারে এমন ক্ষেত্রে এটি কোনওরকম কিছু দ্বারা স্থির করা যেতে পারে

:focus { background-color: #fff; }

Comments

পৃষ্ঠভূমি? আমি জানতাম না যে ক্রোম এছাড়াও একটি ব্যাকগ্রাউন্ড রঙ যুক্ত করেছে? যদি তা হয় তবে :focus { background-color: #fff; }

— এটির

সিএসএসের সাহায্যে বাহ্যরেখা মেরে ফেলা হওয়া রোধ করতে পারে তবে এটি প্রকৃত অটোফিলিং আটকাবে না। আপনি যদি এটি করতে চান তবে স্ব-পরিপূর্ণ বৈশিষ্ট্য, অমানুষ বা না ব্যবহার করা গুরুত্বপূর্ণ।

— টম বাটেল

@ পেস্টা সঠিক, এটি সঠিক উত্তর নয়, তবে এটি অবশ্যই একটি অনুরূপ সমস্যা সমাধান করে

— ডেভিড লসন

ট্যাবলেট এবং স্টাফ নিয়ে কাজ করার সময় যত্ন নিন, ডিফল্ট অ্যান্ড্রয়েড ব্রাউজারটি বাহ্যরেখা ছাড়াই ব্যবহার করা কিছুটা কঠিন । নন-মোবাইল ব্রাউজারগুলিতে প্রয়োগ করার জন্য যথেষ্ট সহজ :)

— টিম পোস্ট

একটি ছোট উন্নতি: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }

— ফিলিপ লিমা

Answer 3

এটি ঠিক আপনার সন্ধান করছেন!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Comments

এটি একটি দুর্দান্ত হ্যাক। ধন্যবাদ

— জেসন

আমি input:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }

— স্টেফানিউকিউ

হাই @ জেস্টর্মথাকিড, আমি এটি ব্যবহার করেছি ..., তবে সঠিক ইনপুটগুলির জন্য কাজ করিনি ... দয়া করে এর উত্তর দিন ...

— মিঠু

তিনি আসলে জিজ্ঞাসা প্রশ্নের উত্তর দেওয়ার জন্য ধন্যবাদ! আমি প্রায় হারাতে শুরু করেছিলাম।

— বিভেরনন

এখানে সেরা উত্তর, আমি এখনও গুগল স্বয়ংসম্পূর্ণ চেয়েছিলাম, তাই ধন্যবাদ

— স্প্যানেল

Answer 4

কিছুটা jQuery ব্যবহার করে আপনি স্বতঃপূরণ কার্যকারিতা অক্ষত রেখে ক্রোমের স্টাইলিং সরিয়ে ফেলতে পারেন। আমি এটি সম্পর্কে এখানে একটি ছোট পোস্ট লিখেছি: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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);
    });
});}

Comments

ইঙ্গিতটির জন্য ধন্যবাদ! তবে ফর্মটি পোস্ট করার পরে, পিছনে বোতামটি ক্লিক করে, হলুদ হাইলাইটটি ফিরে আসল। এটি কভার করার জন্য আমি আপনার স্নিপেটটি (আমার উত্তর দেখুন) প্রসারিত করেছি।

— 321X

); +1 টি চমৎকার সমাধান @Benjamin, এটা সামান্য বিট হলুদ flashs কিন্তু এটা শেষে সংশোধন করা হয়েছে

— itsme

Answer 5

সমস্ত ক্ষেত্রের জন্য সীমানা সরানোর জন্য আপনি নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

*:focus { outline:none; }

নির্বাচিত ক্ষেত্রগুলির জন্য সীমানা অপসারণ করতে কেবল আপনি চান ইনপুট ক্ষেত্রগুলিতে এই শ্রেণিটি প্রয়োগ করুন:

.nohighlight:focus { outline:none; }

আপনি যেমন ইচ্ছা তেমন সীমান্ত পরিবর্তন করতে পারেন:

.changeborder:focus { outline:Blue Solid 4px; }

(বিল বেকেলম্যানের কাছ থেকে: সিএসএস ব্যবহার করে ক্রমের স্বয়ংক্রিয় সীমানা ওভাররাইড করুন )

Answer 6

হ্যাঁ, এটি একটি প্রধান মাথাব্যথা হবে, যা আমার মতে ফিরতে মূল্যহীন। হতে পারে আপনি আপনার ইউআই কৌশলটি কিছুটা সামান্য তাত্পর্যপূর্ণ করতে পারেন, এবং বাক্সটি লাল রঙ করার পরিবর্তে, আপনি সীমানাগুলি লাল রঙ করতে পারেন, বা তার পাশে একটি ছোট লাল টেপ রাখতে পারেন (জিমেইলগুলি "লোডিং" টেপের মতো) যা বাক্সটি যখন সরে যায় তখন ম্লান হয়ে যায় ফোকাস।

Answer 7

এটি jQuery সহ এক টুকরো পিঠা:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

অথবা আপনি যদি আরও কিছু নির্বাচনী হতে চান তবে কোনও নির্বাচকের জন্য একটি শ্রেণির নাম যুক্ত করুন।

Answer 8

আমার মতে সহজ উপায় হ'ল:

1. Http://www.quirksmode.org/js/detect.html পান

2. এই কোডটি ব্যবহার করুন:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };
   

Answer 9

@ বেঞ্জামিন তার সমাধানটি প্রয়োগ করার পরে আমি জানতে পেরেছিলাম যে পিছনের বোতামটি টিপানো আমাকে এখনও হলুদ হাইলাইট দেয়।

আমার সমাধান একরকম এই হলুদ হাইলাইট ফিরে আসা প্রতিরোধ করার জন্য নিম্নলিখিত jQuery এর জাভাস্ক্রিপ্ট প্রয়োগের দ্বারা হয়:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('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);
            });
        }
    });
</script>

আশা করি এটি যে কাউকে সাহায্য করবে !!

Answer 10

এইটা কাজ করে. সর্বোপরি, আপনি আরজিবিএ মানগুলি ব্যবহার করতে পারেন (বাক্স-ছায়া ইনসেট হ্যাক আরজিবার সাথে কাজ করে না)। এটি @ বেনিয়ামিনের উত্তরের একটি সামান্য টুইট। আমি $ (উইন্ডো)। লোড () এর পরিবর্তে $ (নথি) .ডিডি () ব্যবহার করছি। এটি আমার পক্ষে আরও ভাল কাজ করছে বলে মনে হচ্ছে - এখন আরও অনেক কম FOUC রয়েছে। আমি বিশ্বাস করি না যে using (ডকুমেন্ট) .ডিডি () ব্যবহারের কিছু অসুবিধা আছে।

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};

Answer 11

আজকের সংস্করণগুলির জন্য, দুটি লগইন ইনপুটগুলির মধ্যে একটিতে রাখলে এটি খুব কার্যকর হয়। 40+ সংস্করণ এবং দেরী ফায়ারফক্স ইস্যুটিও ঠিক করুন।

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

Answer 12

input:focus { outline:none; }

এটি আমার পক্ষে দুর্দান্ত কাজ করেছে তবে আপনার সাইটে জিনিসগুলিকে অভিন্ন রাখার সম্ভাবনা বেশি আপনার পাঠ্যক্রমের জন্য এটি আপনার সিএসএসে অন্তর্ভুক্ত করতে চান:

textarea:focus { outline:none; }

এটি এটি বেশিরভাগের কাছেই সুস্পষ্ট বলে মনে হতে পারে তবে নতুনদের জন্য আপনি এটিকে কোনও রঙে সেট করতে পারেন:

input:focus { outline:#HEXCOD SOLID 2px ; }

Answer 13

যদি আমি সঠিকভাবে মনে রাখি তবে ইনপুটগুলির পটভূমির রঙের জন্য স্টাইলশিটে একটি গুরুত্বপূর্ণ নিয়ম গুগল টুলবার স্বতঃপূরণকে ওভাররাইড করে - সম্ভবত ক্রোমের ক্ষেত্রেও এটি একই হবে।