ऑरेंज की रूपरेखा को फोकस पर अक्षम करें

Question

मैं jQuery, jqTouch और phonegap का उपयोग करते हुए एक ऐप को कोड कर रहा हूं और एक निरंतर समस्या के बीच चला गया है जब उपयोगकर्ता कोमल कीबोर्ड पर गो बटन का उपयोग करके एक फॉर्म सबमिट करता है।

यद्यपि कर्सर का उपयोग करके उपयुक्त फॉर्म इनपुट तत्व पर ले जाना आसान है $('#input_element_id').focus(), नारंगी रंग की रूपरेखा हाइलाइट हमेशा फॉर्म पर अंतिम इनपुट तत्व पर लौटती है। (प्रपत्र सबमिट बटन का उपयोग करके फ़ॉर्म सबमिट किए जाने पर हाइलाइट दिखाई नहीं देता है।)

नारंगी हाइलाइट को पूरी तरह से निष्क्रिय करने के लिए मुझे एक रास्ता खोजने की आवश्यकता है या फिर इसे कर्सर के समान इनपुट तत्व में ले जाएं।

अब तक, मैंने अपने सीएसएस में निम्नलिखित जोड़ने की कोशिश की है:

.class_id:focus {
    outline: none;
}

यह क्रोम में काम करता है लेकिन एमुलेटर या मेरे फोन पर नहीं। मैंने theme.cssपढ़ने के लिए jqTouch का संपादन करने की भी कोशिश की है :

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संपत्ति या तो ब्राउज़र पर काम करने के लिए प्रतीत नहीं होता।

Answer 1

प्रयत्न:

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

Comments

यह एंड्रॉयड 4.0.4 के साथ काम नहीं करता है - किसी को भी एक ही अनुभव किया है? (यह पिछले संस्करणों और 4.1 पर काम करता है)

— 目

Android 4.0.4 इसके साथ काम करता है: -webkit-user-संशोधित: रीड-राइट-प्लेनटेक्स्ट-ओनली;

— oori

@oori यह करता है, हालांकि कीबोर्ड को पॉप अप करके "आईओएस" को तोड़ देता है।

— अधिकतम

@ मोम, आप टिप्पणी स्पष्ट नहीं है। iOS पर - एक बार जब आप इनपुट /

— टेक्सटेरिया

@ ओरी ठीक है? यह गैर-इनपुट गैर-टेक्स्टएरिया तत्वों के साथ मदद नहीं करता है, जो मेरी टिप्पणी का विषय था।

— मैक्स

Answer 2

Android डिफ़ॉल्ट, Android Chrome और iOS Safari 100% पर काम करें

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

Comments

यह चयनित उत्तर होना चाहिए

— mlg87

उपयोग करने के बजाय *आप केवल उपयोग कर सकते हैं button, यदि आपका मुद्दा उदाहरण के लिए बटन के साथ है।

— ब्रायन बर्न्स

Answer 3

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

अपनी सीएसएस फ़ाइल में। यह मेरे लिए काम किया!

Answer 4

Android के लिए इनपुट फ़ोकस पर नारंगी बॉक्स निकालें

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

अधिकांश संस्करणों के लिए टैप-हाइलाइट-रंग

4.0.4 के लिए उपयोगकर्ता-संशोधित करें

Comments

अब कुछ दिनों के लिए एक फिक्स [Android 4.1.2] खोज रहा है। यह एकमात्र ऐसा काम है। बहुत - बहुत धन्यवाद!

— cassi.lup

@ उपरोक्त उत्तर निश्चित रूप से काम करता है ... अपने कोड के साथ एक प्लंक्र / jsfiddle बनाएं, ताकि हम आपको देख सकें और आपकी सहायता कर सकें।

— ओरी

@ 4.0.4 के लिए उपयोगकर्ता-संशोधित कोई अन्य समाधान अच्छा समाधान नहीं है यदि आपके पास है तो कृपया इसे साझा करें।

— अमित

Answer 5

फोकस लाइन के लिए प्रयास करें

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

Comments

केवल एंड्रॉइड 4.2 उपकरणों और इसी तरह के लिए काम कर रहे समाधान।

— andresz

Answer 6

ज्ञात हो कि इस CSS का उपयोग करके -webkit-user-modify: read-write-plaintext-only;उस भयानक हाइलाइट 'बग' को हटा दिया जाएगा - लेकिन यह एक विशिष्ट कीबोर्ड प्रदान करने के लिए आपके उपकरणों की क्षमता को मार सकता है। सैमसंग टैब 2 पर एंड्रॉइड 4.0.3 चलाने के लिए, हम अब संख्यात्मक कीबोर्ड प्राप्त नहीं कर सकते। यहां तक ​​कि टाइप = 'नंबर' और / या टाइप = 'टेल' का उपयोग करना। अधिक निराश! बीटीडब्ल्यू, टैप हाइलाइटिंग रंग ने इस डिवाइस और ओएस कॉन्फिग के लिए इस मुद्दे को हल करने के लिए कुछ नहीं किया। हम Android के लिए Safari चला रहे हैं।

Comments

कैसे आप Android के लिए Safari चला रहे हैं।

— अमित

हे @Amit, यह एक लंबे समय के बाद से मैं यह जवाब दिया है! यह सिर्फ कारखाने के मानक के रूप में डिवाइस से सीधे बाहर चल रहा था ... मैं कहूँगा ... Tab2 उस समय बाजार में बहुत नया था।

— फाइवबीयर

Answer 7

यह सुनिश्चित करने के लिए कि tap-highlight-colorसंपत्ति आपके लिए काम करती है, पहले इन बातों पर विचार करें:

काम नहीं कर रहा:
-webkit- उपयोगकर्ता-संशोधित: केवल पढ़ने-लिखने-प्लेटेक्स्ट;
// यह कभी-कभी तत्व को क्लिक करने पर देशी कीबोर्ड को पॉपअप करने के लिए ट्रिगर करता है

.class: सक्रिय; .class: फ़ोकस {-bbkit-tap-highlight-color: rgba (0,0,0,0); }
// यह काम नहीं कर रहा है अगर राज्यों के लिए परिभाषित किया गया है

काम कर रहे:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

यह मामला Android के लिए v2.3 से v4.x यहां तक ​​कि एक PhongeGap एप्लिकेशन में काम करता है । मैंने इसे एंड्रॉइड 2.3.3 के साथ गैलेक्सी वाई, नेक्सस 4 पर एंड्रॉइड 4.2.2 के साथ और गैलेक्सी नोट 2 पर एंड्रॉइड 4.1.2 के साथ परीक्षण किया। इसलिए इसे केवल तत्व के लिए राज्यों के लिए परिभाषित न करें ।

Comments

यह टिप मेरे लिए Android 2.3 पर एक WebView के साथ काम करती है।

— dAngelov

वाह यह एक काम किया !! (एंड्रॉयड 4.1.2) गोड्डम! मुझे वेबव्यू विखंडन से नफरत है !!

— किसी ने

Answer 8

CSS फ़ाइल में नीचे दिए गए कोड का उपयोग करें

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

यह मेरे लिए काम है। मुझे उम्मीद है कि यह आपके लिए काम करेगा।

Answer 9

यह मेरे लिए इमेज मैप एरिया लिंक पर काम नहीं करता था, एकमात्र कार्य समाधान था, ऑनटचेंड इवेंट को कैप्चर करके और हैंडलर पर गलत रिटर्न करके डिफ़ॉल्ट ब्राउज़र व्यवहार को रोककर जावास्क्रिप्ट का उपयोग करना।

jQuery के साथ:

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

Answer 10

मैं सिर्फ अपना अनुभव बांटना चाहता था। मुझे वास्तव में यह काम करने के लिए नहीं मिला, और मैं धीमी सीएसएस से बचना चाहता था- *। मेरा समाधान अच्छे पुराने एरिक मेयर के रीसेट सीएसएस v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) को डाउनलोड करना था और इसे अपने फोनगैप प्रोजेक्ट में जोड़ना था। मैंने तब जोड़ा:

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

मेरे अनुभव में यह * के लिए एक तेज़ दृष्टिकोण है, लेकिन यह कम अजीब बग के लिए भी एक दृष्टिकोण है। टैप-हाइलाइट का संयोजन, -webkit- उपयोगकर्ता-संशोधित: रीड-राइट-प्लेनटेक्स्ट-केवल और उदाहरण के लिए पाठ हाइलाइटिंग को अक्षम करने से हमें बहुत सारे हेड उपलब्ध हैं। सबसे खराब में से एक यह है कि अचानक कीबोर्ड इनपुट काम करना बंद कर देता है और कीबोर्ड विज़ुअलाइज़ेशन धीमा कर देता है।

नारंगी हाइलाइट अक्षम के साथ पूरा CSS-रीसेट:

/**
 * 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;
}

Answer 11

मैंने यह एक कोशिश की है और ठीक काम किया है: -

एचटीएमएल: -

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

सीएसएस

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

Comments

-वेबकिट-टैप-हाइलाइट-रंग: पारदर्शी; -> महान, इसे Nexus5 (क्रोम) और किंडल फायर एचडी 7 '' के लिए हल किया गया। अन्य सभी विकल्पों ने इन उपकरणों / ब्राउज़र के लिए मदद नहीं की। ध्यान रखें, Nexus5 पर फ़ायरफ़ॉक्स और ओपेरा को लाइन की आवश्यकता नहीं थी।

— माइकल बियरमैन

Answer 12

यह न केवल नलों के लिए काम करेगा, बल्कि साथ ही मंडराना भी होगा:

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

Answer 13

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

Answer 14

Ionic में मेरे लिए यह काम, बस सीएसएस फ़ाइल में ओवरराइट करने के लिए डाल दिया

:focus {
    outline-width: 0px;
}

Answer 15

यदि डिजाइन रूपरेखा का उपयोग नहीं करता है, तो यह काम करना चाहिए:

*, *::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;
}

Answer 16

निम्नलिखित कोड की कोशिश करें जो सीमा रूपरेखा को अक्षम करते हैं

रूपरेखा: कोई भी महत्वपूर्ण नहीं;