ปิดการใช้งานโครงร่างสีส้มเน้นที่โฟกัส


106

ฉันกำลังเขียนโค้ดแอปโดยใช้ jQuery, jqTouch และ phonegap และพบปัญหาถาวรซึ่งเกิดขึ้นเมื่อผู้ใช้ส่งแบบฟอร์มโดยใช้ปุ่ม Go บนซอฟต์คีย์บอร์ด

แม้ว่าจะเป็นเรื่องง่ายที่จะทำให้เคอร์เซอร์ย้ายไปยังองค์ประกอบการป้อนข้อมูลแบบฟอร์มที่เหมาะสมโดยใช้$('#input_element_id').focus()การเน้นโครงร่างสีส้มจะกลับไปที่องค์ประกอบอินพุตสุดท้ายในฟอร์มเสมอ (ไฮไลต์ไม่ปรากฏขึ้นเมื่อส่งแบบฟอร์มโดยใช้ปุ่มส่งแบบฟอร์ม)

สิ่งที่ฉันต้องการคือหาวิธีปิดการใช้งานไฮไลต์สีส้มโดยสมบูรณ์ไม่เช่นนั้นให้ย้ายไปที่องค์ประกอบอินพุตเดียวกันกับเคอร์เซอร์

จนถึงตอนนี้ฉันได้ลองเพิ่มสิ่งต่อไปนี้ใน CSS แล้ว:

.class_id:focus {
    outline: none;
}

สิ่งนี้ใช้งานได้ใน Chrome แต่ไม่ใช่บนโปรแกรมจำลองหรือบนโทรศัพท์ของฉัน ฉันได้ลองแก้ไข 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. คุณสมบัติเค้าร่างใช้งานได้บน Chrome เท่านั้นไม่ใช่บนเบราว์เซอร์ Android

  2. -webkit-tap-highlight-colorคุณสมบัติไม่เป็นจริงในการทำงานบนเบราว์เซอร์ของ Android แต่ไม่ได้บน Chrome ปิดใช้งานไฮไลต์ที่โฟกัสเช่นเดียวกับการแตะ

  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
มันใช้ไม่ได้กับ Android 4.0.4 - มีใครเคยเจอแบบเดียวกันบ้างไหม? (ใช้ได้กับเวอร์ชันก่อนหน้าและ 4.1)
最白目

6
Android 4.0.4 ทำงานร่วมกับ: -webkit-user-modified: read-write-plaintext-only;
oori

@oori แต่ iOS จะ "หยุดพัก" โดยทำให้แป้นพิมพ์ปรากฏขึ้น
สูงสุด

@ แม็กคุณแสดงความคิดเห็นไม่ชัดเจน บน iOS - แน่นอนว่าแป้นพิมพ์จะปรากฏขึ้นเมื่อคุณโฟกัสไปที่อินพุต / พื้นที่ข้อความ .. โปรดอธิบาย
oori

4
@oori โอเคมั้ย? นั่นไม่ได้ช่วยในองค์ประกอบที่ไม่ใช่ textarea ที่ไม่ใช่การป้อนข้อมูลซึ่งเป็นหัวข้อของความคิดเห็นของฉัน
สูงสุด

43

ทำงานบน Android Default, 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;
} 

1
นี่ควรเป็นคำตอบที่เลือก
mlg87

แทนที่จะใช้*คุณสามารถใช้ได้buttonหากปัญหาของคุณอยู่ที่ปุ่มต่างๆเช่น
Brian Burns


18

ลบกล่องสีส้มที่โฟกัสอินพุตสำหรับ Android

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

แตะ - เน้นสีสำหรับเวอร์ชันส่วนใหญ่

ผู้ใช้แก้ไขสำหรับ 4.0.4


ค้นหาวิธีแก้ไข [Android 4.1.2] มาสองสามวันแล้ว นี่เป็นเพียงคนเดียวที่ได้ผล ขอบคุณมาก!
cassi.lup

@ เบ็นคำตอบข้างต้นใช้ได้ผลอย่างแน่นอน ... สร้าง plunkr / jsfiddle ด้วยรหัสของคุณเพื่อให้เราสามารถมองเห็นและช่วยเหลือคุณได้
oori

@Ben user-modified สำหรับ 4.0.4 ไม่ใช่วิธีแก้ปัญหาที่ดีหากคุณมีแล้วโปรดแบ่งปัน
Amit

12

ลองใช้ Focus Line

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

โซลูชันที่ใช้งานได้สำหรับอุปกรณ์ Android 4.2 และที่คล้ายกันเท่านั้น
andreszs

10

โปรดทราบว่าการใช้ CSS นี้-webkit-user-modify: read-write-plaintext-only;จะลบ 'จุดบกพร่อง' ของไฮไลต์ที่น่ากลัวนั้น - แต่มันอาจฆ่าความสามารถของอุปกรณ์ของคุณในการจัดหาแป้นพิมพ์เฉพาะ สำหรับเราที่ใช้ Android 4.0.3 บน Samsung Tab 2 เราไม่สามารถใช้แป้นพิมพ์ตัวเลขได้อีกต่อไป แม้จะใช้ type = 'number' & / หรือ type = 'tel' น่าหงุดหงิดมาก! BTW การตั้งค่าแตะสีไฮไลต์ไม่ได้ช่วยแก้ปัญหานี้สำหรับอุปกรณ์นี้และการกำหนดค่าระบบปฏิบัติการ เรากำลังใช้งาน Safari สำหรับ Android


คุณใช้ Safari สำหรับ Android อย่างไร
Amit

เฮ้ @Amit มันนานมากแล้วที่ฉันตอบคำถามนี้! มันเพิ่งวิ่งออกจากอุปกรณ์ทันทีตามมาตรฐานโรงงานฉันจะบอกว่า ... Tab2 ค่อนข้างใหม่ในตลาดในเวลานั้น
Fivebears

7

เพื่อให้แน่ใจว่าการtap-highlight-colorลบล้างพร็อพเพอร์ตี้ใช้ได้ผลสำหรับคุณก่อนอื่นให้พิจารณาสิ่งต่อไปนี้:

ไม่ทำงาน:
-webkit-user-modified: read-write-plaintext-only;
// บางครั้งอาจทำให้แป้นพิมพ์เนทีฟเป็นป๊อปอัปเมื่อคลิกองค์ประกอบ

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// จะไม่ทำงานหากกำหนดไว้สำหรับรัฐ

การทำงาน:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

กรณีนี้ใช้ได้กับAndroid ตั้งแต่ v2.3 ถึง v4.xแม้ในแอปพลิเคชัน PhongeGap ฉันทดสอบบน Galaxy Y พร้อม Android 2.3.3 บน Nexus 4 พร้อม Android 4.2.2 และ Galaxy Note 2 พร้อม Android 4.1.2 ดังนั้นอย่ากำหนดเป็นสถานะสำหรับองค์ประกอบเท่านั้น


1
เคล็ดลับนี้เป็นสิ่งที่ทำให้ฉันใช้ WebView บน Android 2.3
dAngelov

WOOOOW อันนี้ใช้ได้ !! (Android 4.1.2) ก็อด! ฉันเกลียดการแยกส่วนของ webview !!
ใครสักคน

6

ใช้โค้ดด้านล่างในไฟล์ CSS

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

มันทำงานสำหรับฉัน ฉันหวังว่ามันจะได้ผลสำหรับคุณ


2

สิ่งนี้ไม่ได้ผลสำหรับฉันในลิงก์ Image Map Area วิธีเดียวที่ใช้งานได้คือการใช้ javascript โดยการจับเหตุการณ์ ontouchend และป้องกันพฤติกรรมเริ่มต้นของเบราว์เซอร์โดยส่งคืนเท็จบนตัวจัดการ

ด้วย jQuery:

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

2

ฉันแค่อยากจะแบ่งปันประสบการณ์ของฉัน ฉันไม่ได้ทำให้มันใช้งานได้จริง ๆ และฉันต้องการหลีกเลี่ยง css- * ที่ช้า วิธีแก้ปัญหาของฉันคือดาวน์โหลดรีเซ็ต CSS v2.0 ของ Eric Meyer รุ่นเก่าที่ดี ( http://meyerweb.com/eric/tools/css/reset/ ) และเพิ่มสิ่งนี้ในโครงการ phonegap ของฉัน จากนั้นฉันก็เพิ่ม:

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

จากประสบการณ์ของฉันนี่เป็นวิธีที่เร็วกว่าในการ * แต่ก็เป็นวิธีการที่จะทำให้เกิดข้อบกพร่องที่แปลกน้อยกว่า การรวมกันของ tap-highlight, -webkit-user-modified: read-write-plaintext-only และการปิดการใช้งานตัวอย่างเช่นการเน้นข้อความทำให้เรามี headaces มากมาย สิ่งที่เลวร้ายที่สุดอย่างหนึ่งที่จู่ๆการป้อนข้อมูลแป้นพิมพ์หยุดทำงานและการแสดงภาพแป้นพิมพ์ช้า

รีเซ็ต 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;
}

1

ฉันได้ลองใช้ตัวนี้แล้วและใช้งานได้ดี: -

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; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

-webkit-tap-highlight-color: โปร่งใส; -> ยอดเยี่ยมแก้ไขได้เช่น Nexus5 (Chrome) และ Kindle Fire HD 7 '' ตัวเลือกอื่น ๆ ทั้งหมดไม่ได้ช่วยสำหรับอุปกรณ์ / เบราว์เซอร์เหล่านี้ ระวัง Firefox และ Opera ไม่จำเป็นต้องใช้บรรทัดบน Nexus5
Michael Biermann

1

สิ่งนี้จะใช้งานได้ไม่เฉพาะกับการแตะเท่านั้น แต่ยังวางเมาส์เหนือสิ่งนี้ด้วย:

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

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

 />



โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.