ফোকাসে কমলা রঙের রূপরেখা হাইলাইট অক্ষম করুন


106

আমি jQuery, jqTouch এবং ফোনগ্যাপ ব্যবহার করে একটি অ্যাপ কোডিং করছি এবং একটি অবিরাম সমস্যা জুড়ে চলেছি যা যখন কোনও ব্যবহারকারী সফট কীবোর্ডের গো বোতামটি ব্যবহার করে কোনও ফর্ম জমা দেয় তখন দেখা দেয়।

যদিও কার্সারটি ব্যবহার করে উপযুক্ত ফর্ম ইনপুট উপাদানটিতে স্থানান্তরিত করা সহজ $('#input_element_id').focus()তবে কমলা রূপরেখা হাইলাইট সর্বদা ফর্মের শেষ ইনপুট উপাদানটিতে ফিরে আসে। (ফর্ম জমা দেওয়ার বোতামটি ব্যবহার করে ফর্মটি জমা দেওয়ার সময় হাইলাইটটি প্রদর্শিত হবে না))

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

এখনও অবধি, আমি আমার সিএসএসে নিম্নলিখিতগুলি যুক্ত করার চেষ্টা করেছি:

.class_id:focus {
    outline: none;
}

এটি ক্রোমে কাজ করে তবে এমুলেটর বা আমার ফোনে নয়। আমি jqTouch এডিট করার চেষ্টা করেছি theme.css:

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

কোন প্রভাব নেই। আমি AndroidManifest.xmlফাইলটিতে নিম্নলিখিত প্রতিটি সংযোজন চেষ্টা করেছি :

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

যার কোনওটিরই কোনও প্রভাব নেই।

আপডেট: আমি এটি দিয়ে আরও কিছু সমস্যার সমাধান করেছি এবং আজ পর্যন্ত এটি পেয়েছি:

  1. বাহ্যরেখা সম্পত্তি অ্যান্ড্রয়েড ব্রাউজারে নয়, কেবল ক্রোমে কাজ করে।

  2. -webkit-tap-highlight-colorসম্পত্তি, অ্যান্ড্রয়েড ব্রাউজারে সত্য কাজে না যদিও ক্রোম নয়। এটি ফোকাসের পাশাপাশি ট্যাপ করার ক্ষেত্রে হাইলাইটটি অক্ষম করে।

  3. -webkit-focus-ring-colorসম্পত্তি উভয় ব্রাউজারে কাজ বলে মনে হচ্ছে না।

উত্তর:


210

চেষ্টা করুন:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

10
এটি অ্যান্ড্রয়েড 4.0.০.৪ নিয়ে কাজ করে না - কেউ কি একই অভিজ্ঞতা পেয়েছে? (এটি পূর্ববর্তী সংস্করণ এবং 4.1 এ কাজ করে)
白 目

6
অ্যান্ড্রয়েড .4.০.৪ এর সাথে কাজ করে: -উইবকিট-ইউজার-মডিফাই: রিড-রাইটিং-প্লেইন টেক্সট-কেবল;
ওরি

@ ওরি এটি কীবোর্ডটি পপআপ করার কারণে আইওএস "ব্রেক" করে।
সর্বোচ্চ

@ ম্যাক্স, আপনি মন্তব্য স্পষ্ট নয়। আইওএস-এ একবার কোনও ইনপুট /
টেক্সেরিয়ায়

4
@ উরি ঠিক আছে? এটি ইনপুট অ-পাঠ্য উপাদানগুলিতে সহায়তা করে না, যা আমার মন্তব্যের বিষয় ছিল of
সর্বাধিক

43

অ্যান্ড্রয়েড ডিফল্ট, অ্যান্ড্রয়েড ক্রোম এবং আইওএস সাফারি 100% এ কাজ করুন

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 

1
এটি নির্বাচিত উত্তর হওয়া উচিত
mlg87

পরিবর্তে *আপনি কেবল ব্যবহার করতে পারবেন button, যদি আপনার সমস্যাটি বোতামগুলির সাথে থাকে।
ব্রায়ান বার্নস 13

35
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

আপনার সিএসএস ফাইলে এটা আমার জন্য কাজ!


18

অ্যান্ড্রয়েডগুলির জন্য ইনপুট ফোকাসে কমলা বাক্সটি সরান

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

বেশিরভাগ সংস্করণের জন্য ট্যাপ-হাইলাইট-রঙ

৪.৪.৪ এর জন্য ব্যবহারকারী-সংশোধন করুন


এখন কয়েক দিন ধরে একটি ফিক্স [Android 4.1.2] অনুসন্ধান করা হয়েছে for এটিই একমাত্র কাজ করেছে। অসংখ্য ধন্যবাদ!
cassi.lup

@ উপরের উত্তরটি নিশ্চিত হয়ে কাজ করে ... আপনার কোড সহ একটি প্লঙ্কার / জেএসফিডেল তৈরি করুন, যাতে আমরা আপনাকে দেখতে এবং সহায়তা করতে পারি।
ওওরি

৪.৪.৪ এর জন্য @ ব্যবহারকারী ব্যবহারকারী-সংশোধন করা অন্য কোনও সমাধানের জন্য ভাল সমাধান নয় যদি আপনার কাছে থাকে তবে দয়া করে এটি ভাগ করুন।
অমিত

12

ফোকাস লাইনের জন্য চেষ্টা করুন

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

অ্যান্ড্রয়েড 4.2 ডিভাইস এবং অনুরূপ জন্য কেবল কাজের সমাধান।
andreszs

10

সচেতন থাকুন যে এই সিএসএস ব্যবহার করে -webkit-user-modify: read-write-plaintext-only;সেই ভয়ঙ্কর হাইলাইট 'বাগ' মুছে ফেলা হবে - তবে এটি আপনার ডিভাইসগুলিকে একটি নির্দিষ্ট কীবোর্ড সরবরাহের ক্ষমতা হারাতে পারে। স্যামসাং ট্যাব ২ এ অ্যান্ড্রয়েড 4.0.০.৩ চালানোর জন্য, আমরা আর সংখ্যার কীবোর্ড পেতে পারি না। এমনকি টাইপ = 'সংখ্যা' & / অথবা টাইপ করুন = 'টেলি'। খুবই হতাশাজনক! বিটিডাব্লু, সেটিং ট্যাপ হাইলাইট রঙটি এই ডিভাইস এবং ওএস কনফিগারেশনের জন্য এই সমস্যাটি সমাধান করতে কিছুই করে নি। আমরা অ্যান্ড্রয়েডের জন্য সাফারি চালিয়ে যাচ্ছি।


আপনি কীভাবে অ্যান্ড্রয়েডের জন্য সাফারি চালাচ্ছেন।
অমিত

আরে @ আমিট, আমি এর উত্তর দেওয়ার পরে অনেক দিন হয়ে গেল! কারখানার স্ট্যান্ডার্ড হিসাবে এটি কেবল ডিভাইসটির বাইরে চলে যাচ্ছিল আমি বলব ... ট্যাব 2 বাজারে তখন বেশ নতুন ছিল।
ফাইভ বিয়ারস

7

tap-highlight-colorসম্পত্তি ওভাররাইডিং আপনার পক্ষে কাজ করে তা নিশ্চিত করতে, প্রথমে এই বিষয়গুলি বিবেচনা করুন:

কাজ করছে না:
-উইবকিট-ইউজার-মডিফাই: রিড-রাইটিং-প্লেইন টেক্সট;
// উপাদানটিতে ক্লিক করার সময় এটি কখনও কখনও পপআপে নেটিভ কীবোর্ডকে ট্রিগার করে

.ক্লাস: সক্রিয়, .ক্লাস: ফোকাস {-ওয়েবেকিট-ট্যাপ-হাইলাইট-রঙ: rgba (0,0,0,0); }
// রাজ্যের জন্য সংজ্ঞায়িত করা থাকলে এটি কাজ করছে না

ওয়ার্কিং:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

এই কেসটি ফোঞ্জগ্যাপ অ্যাপ্লিকেশনে এমনকি v2.3 থেকে v4.x পর্যন্ত অ্যান্ড্রয়েডের জন্য কাজ করে। আমি এটিকে অ্যান্ড্রয়েড 2.3.3 এর সাথে গ্যালাক্সি ওয়াইতে, অ্যান্ড্রয়েড 4.2.2 সহ নেক্সাস 4 এবং অ্যান্ড্রয়েড 4.1.2 সহ গ্যালাক্সি নোট 2 এ পরীক্ষা করেছি। সুতরাং এটি শুধুমাত্র উপাদানটির জন্য রাজ্যগুলির জন্য এটি সংজ্ঞায়িত করবেন না


1
এই টিপটিই এটিকে অ্যান্ড্রয়েড ২.৩ এ একটি ওয়েবভিউ দিয়ে আমার জন্য কাজ করে।
dAgegelov

উবু এই এক কাজ করেছে !! (Android 4.1.2) গডডাম! আমি ওয়েবভিউ খণ্ডন ঘৃণা করি !!
কেউ কোথাও

6

সিএসএস ফাইলে নীচের কোডটি ব্যবহার করুন

  * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    :focus {
        outline: 0;
        border:none;
        color: rgba(0, 0, 0, 0);
    }

এটা আমার জন্য কাজ। আমি আশা করি এটি আপনার পক্ষে কাজ করে


2

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

jQuery সহ:

$("map area").on("touchend", function() {
   return false;
});

2

আমি শুধু আমার অভিজ্ঞতা শেয়ার করতে চেয়েছিলাম। আমি সত্যিই এটি কাজ করতে পাইনি, এবং আমি ধীর CSS- * এড়াতে চেয়েছিলাম। আমার সমাধানটি হ'ল পুরাতন এরিক মায়ারের রিসেট সিএসএস ভি 2.0 ডাউনলোড করুন ( http://meyerweb.com/eric/tools/css/reset/ ) এবং এটি আমার ফোনগ্যাপ প্রকল্পে যুক্ত করুন। আমি তখন যুক্ত করেছি:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

আমার অভিজ্ঞতায় এটি * * -র কাছে দ্রুততর পন্থা, তবে এটি কম অদ্ভুত ত্রুটির প্রতিও একটি দৃষ্টিভঙ্গি। ট্যাপ-হাইলাইটের সংমিশ্রণ, -উইবকিট-ইউজার-মডিফাই: কেবল পঠন-লেখার-প্লেইন টেক্সট এবং অক্ষম উদাহরণস্বরূপ পাঠ্য হাইলাইটিং আমাদের প্রচুর হেড্যাসেস সরবরাহ করেছে। হ'ল হঠাৎ কীবোর্ড ইনপুট কাজ করা বন্ধ করে দেয় এবং কীবোর্ড ভিজ্যুয়েজেশন ধীর করে দেয় worst

কমলা হাইলাইট অক্ষম সহ সম্পূর্ণ সিএসএস-পুনরায় সেট করুন:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

1

আমি এটি চেষ্টা করেছি এবং ভাল কাজ করেছি: -

এইচটিএমএল: -

<a class="html5logo"  href="javascript:void(0);"  ontouchstart="return true;"></a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

-উইবকিট-ট্যাপ-হাইলাইট-রঙ: স্বচ্ছ; -> দুর্দান্ত, এটি সমাধান করেছেন অর্থাত্ Nexus5 (ক্রোম) এবং কিন্ডল ফায়ার এইচডি 7 '' এর জন্য। অন্যান্য সমস্ত বিকল্প এই ডিভাইস / ব্রাউজারের জন্য সহায়তা করে নি। যত্ন নিন, ফায়ারফক্স এবং অপেরা Nexus5 এ লাইনের প্রয়োজন নেই।
মাইকেল বিরম্যান

1

এটি কেবলমাত্র ট্যাপের জন্যই কাজ করবে না, পাশাপাশি পাশাপাশি হোভার করবে:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}


0

আয়নিকে আমার জন্য এই কাজটি, ওভাররাইট করার জন্য কেবল সিএসএস ফাইলে রেখে দিন

:focus {
    outline-width: 0px;
}

-1

যদি ডিজাইনটি রূপরেখা ব্যবহার না করে তবে এই কাজটি করা উচিত:

*, *::active, *::focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
    outline: none!important;
}

-1

নিম্নলিখিত কোডগুলি চেষ্টা করুন যা সীমান্তরেখাটি অক্ষম করে

রূপরেখা: কোনটিই গুরুত্বপূর্ণ নয়;

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