Išjungti fokusavimo oranžinio kontūro parinkimą

Aš koduojame programą naudojant jQuery, jqTouch ir phonegap ir susiduriu su nuolatine problema, kuri atsiranda, kai naudotojas pateikia formą naudodamasis mygtuku „Soft“ (minkšta) klaviatūroje.

Nors žymeklis perkeliamas į atitinkamą formos įvesties elementą, naudodamas $('#input_element_id').focus() , oranžinė kontūro šviesa visada grįžta į paskutinį formos elementą. (Pasirinkimas nerodomas, kai forma yra pateikta naudojant mygtuką „Siųsti“.)

Turiu rasti būdą, kaip visiškai išjungti oranžinį foninį apšvietimą, arba perkelti jį į tą patį įvesties elementą kaip žymeklis.

Iki šiol bandžiau į savo CSS įtraukti:

 .class_id:focus { outline: none; } 

Tai veikia „Chrome“, bet ne emuliatoriuje ar telefone. Aš taip pat bandžiau redaguoti jqTouch theme.css skaitymui:

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

Nėra poveikio. Aš taip pat bandžiau kiekvieną iš šių „ AndroidManifest.xml failo papildymų:

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

Nė vienas iš jų neturi jokio poveikio.

Atnaujinimas: su tuo susiduriau dar daugiau problemų ir vis dar radome:

  • Kontūro nuosavybė veikia tik „Chrome“, o ne „Android“ naršyklėje.

  • -webkit-tap-highlight-color nuosavybė iš tikrųjų veikia „Android“ naršyklėje, bet ne „Chrome“. Jis išjungia apšvietimą tiek fokusuojant, tiek paspaudus.

  • -webkit-focus-ring-color savybė neveikia jokioje naršyklėje.

99
06 марта '11 в 15:34 2011-03-06 15:34 eggdeng yra nustatytas kovo 06 '11, 15:34 2011-03-06 15:34
@ 15 atsakymų

Pabandykite:

 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; // ie Nexus5/Chrome and Kindle Fire HD 7'' 
204
02 апр. Atsakymas, kurį pateikė Baggz 02 Bal 2011-04-02 14:03 '11 at 14:03 2011-04-02 14:03
 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

jūsų CSS faile. Jis dirbo man!

33
17 июня '12 в 0:25 2012-06-17 00:25 atsakymas pateikiamas taip, birželio 17 d., 12 val. 0:25 2012-06-17 00:25

Darbas su „Android“ pagal numatytuosius nustatymus, „Android Chrome“ ir „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; } 
27
21 июля '13 в 16:46 2013-07-21 16:46 atsakymas pateikiamas sergey_c liepos 21 d. 13 val. 16:46 2013-07-21 16:46

Išimkite orrožinį rėmelį androids įvesties fokusui

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

pabrėžti daugelio versijų spalvą

pakeisti vartotoją į 4.0.4

18
06 нояб. atsakymas, duotas Oori lapkričio 06 d 2012-11-06 20:03 '12, 20:03, 2012-11-06 20:03

Pabandykite fokusuoti

 body, textarea:focus, input:focus{ outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } 
13
08 мая '12 в 10:04 2012-05-08 10:04 atsakymą pateikė Ravi Desai gegužės 8 d. 12 d. 10:04 2012-05-08 10:04

Atminkite, kad naudojant šį CSS yra -webkit-user-modify: read-write-plaintext-only; Jei pašalinsite šią siaubingą „klaidos“ klaidą - BUT, ji gali nužudyti jūsų įrenginius, kad suteiktų tam tikrą klaviatūrą. Naudodami „Android“ 4.0.3 skirtuką „Samsung Tab 2“, mums nebegalime gauti skaitmeninės klaviatūros. Net naudojant tipo = 'numerį' ir / arba tipą = 'tel'. Labai varginantis! BTW, nustatydama paryškinimo spalvą, neišsprendė šio įrenginio ir OS konfigūracijos problemos. Mes paleisime „Safari for Android“.

10
20 февр. Atsakymas pateikiamas „ Fivebears“ vasario 20 d. 2013-02-20 00:44 '13 prie 0:44 2013-02-20 00:44

Jei norite įsitikinti, kad viršutinės tap-highlight-color savybės yra svarbios jums, pirmiausia apsvarstykite šiuos dalykus:

Neveikia:
-webkit-user-change: tik skaityti-rašyti-paprastą tekstą;
// Kartais tai sukelia integruotą klaviatūrą, kai paspaudžiamas elementas

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Neveikia, jei apibrėžta valstybėms

Darbai:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Ši byla veikia „ Android“ nuo 3.2 iki v4.x versijos net ir „PhongeGap“ programoje. Aš išbandžiau jį „Galaxy Y“ su „Android 2.3.3“, „Nexus 4“ su „Android“ 4.2.2 ir „Galaxy Note 2“ su „Android“ 4.1.2. Todėl neapibrėžkite jų tik pačiam elementui .

7
21 февр. Atsakymas pateikiamas RynoRn 21 vasario mėn. 2013-02-21 15:19 '13, 15:19, 2013-02-21 15:19

CSS faile naudokite šį kodą

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

Jis veikia man. Tikiuosi, kad tai veikia jums.

4
16 сент. Atsakymas pateikiamas Kailo 16 sep . 2013-09-16 14:37 '13, 14:37, 2013-09-16 14:37

Tai man neveikė nuorodose į Žemėlapio žemėlapio žemėlapį, vienintelis darbo sprendimas buvo naudoti „JavaScript“, užfiksuoti „ontouchend“ įvykį ir užkirsti kelią numatytam naršyklės elgesiui, grąžinant klaidingą tvarkytojui.

su jQuery:

 $("map area").on("touchend", function() { return false; }); 
2
08 марта '13 в 11:20 2013-03-08 11:20 atsakymą pateikė Roberto Andrade kovo 8 d. 13 val. 11:20 2013-03-08 11:20

Aš tik norėjau pasidalinti savo patirtimi. Aš tikrai to nepadariau, ir norėjau išvengti lėtos css- *. Mano sprendimas buvo parsisiųsti seną „Eric Meyer Reset CSS v2.0“ ( http://meyerweb.com/eric/tools/css/reset/ ) ir pridėti jį prie savo projekto telefono pokalbių. Tada pridėjau:

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

Mano patirtis rodo, kad tai greitesnis požiūris į *, tačiau tai taip pat yra požiūris į mažiau keistas klaidas. Pagrindinio apšvietimo, -webkit-user-change: tik skaitymo-rašymo paprasto teksto derinys ir, pavyzdžiui, teksto foninio apšvietimo išjungimas, suteikė mums daug balso pranešimų. Vienas iš blogiausių yra tai, kad staigus klaviatūros įvedimas nustoja veikti ir lėtas vizualizavimas klaviatūroje.

Baigti CSS atstatymą su oranžiniu foniniu apšvietimu išjungtas:

  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);  }  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; } 
2
19 июля '13 в 23:19 2013-07-19 23:19 atsakymas pateikiamas Sindrei liepos 19 d., 13 val. 23:19 2013-07-19 23:19

Tai veiks ne tik kranams, bet ir pakabinti:

 button, button:hover, li:hover, a:hover , li , a , *:hover, * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } 
1
02 мая '13 в 18:50 2013-05-02 18:50 atsakymas pateikiamas abksharma 02 gegužės 13 d. 18:50 2013-05-02 18:50

Aš bandžiau šį ir jis dirbo gerai: -

HTML: -

 <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;  } .html5logo:active { -webkit-transform: scale3d(0.9, 0.9, 1); } 
1
31 дек. Atsakymą pateikė Ashoka Mondal, gruodžio 31 d. 2013-12-31 10:22 '14, 10:22, 2013-12-31 10:22
 <EditText android:id="@+id/edittext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background_normal" /> 
0
13 дек. Atsakymas pateikiamas „ Android“ 13 d. 2013-12-13 08:21 '13, 08:21 am 2013-12-13 08:21

Jei dizainas nenaudoja kontūrų, tai turėtų atlikti užduotį:

 *, *::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; } 
0
19 авг. atsakymą pateikė Robert Richter 19 rug. 2013-08-19 00:16 '13 prie 0:16 2013-08-19 00:16

Pabandykite naudoti šį kodą, kuris išjungia ribinį kontūrą.

kontūras: nėra! svarbu;

-1
26 февр. atsakymas pateikiamas rinkesh 26 vasaris. 2015-02-26 17:34 '15 at 17:34 pm 2015-02-26 17:34

Kiti klausimai apie žymes arba Užduoti klausimą