초점에 주황색 윤곽선 강조 표시 비활성화

jQuery, jqTouch 및 phonegap을 사용하여 앱을 코딩하고 있으며 사용자가 소프트 키보드의 Go 버튼을 사용하여 양식을 제출할 때 발생하는 지속적인 문제를 겪었습니다.

를 사용하면 커서를 적절한 양식 입력 요소로 쉽게 이동할 수 있지만 $('#input_element_id').focus()주황색 윤곽선 강조 표시는 항상 양식의 마지막 입력 요소로 돌아갑니다. (양식 제출 버튼을 사용하여 양식을 제출하면 강조 표시되지 않습니다.)

내가 필요한 것은 주황색 강조 표시를 완전히 비활성화하거나 커서와 동일한 입력 요소로 이동하는 방법을 찾는 것입니다.

지금까지 CSS에 다음을 추가해 보았습니다.

.class_id:focus {
    outline: none;
}

이것은 Chrome에서 작동하지만 에뮬레이터 또는 내 전화에서는 작동하지 않습니다. 또한 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. outline 속성은 Android 브라우저가 아닌 Chrome에서만 작동합니다.

2. 이 -webkit-tap-highlight-color속성은 실제로 Android 브라우저에서는 작동하지만 Chrome에서는 작동하지 않습니다. 두드리는 것뿐만 아니라 초점에 대한 강조 표시를 비활성화합니다.

3. -webkit-focus-ring-color속성은 두 브라우저에서 작동하지 않습니다.

시험:

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

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

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

귀하의 CSS 파일에. 그것은 나를 위해 일했습니다!

Android의 입력 포커스에서 주황색 상자 제거

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

대부분의 버전에 대한 탭 강조 색상

4.0.4 용 사용자 수정

Focus Line 시도

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

이 CSS를 사용하면 -webkit-user-modify: read-write-plaintext-only;끔찍한 하이라이트 '버그'가 제거되지만 특정 키보드를 제공하는 장치 기능이 중단 될 수 있습니다. Samsung Tab 2에서 Android 4.0.3을 실행하는 경우 더 이상 숫자 키보드를 얻을 수 없습니다. type = 'number'& / 또는 type = 'tel'을 사용해도. 매우 실망 스럽습니다! BTW, 탭 강조 색상을 설정해도이 장치 및 OS 구성에 대해이 문제가 해결되지 않았습니다. Android 용 Safari를 실행하고 있습니다.

tap-highlight-color속성 재정의가 제대로 작동 하는지 확인하려면 먼저 다음 사항을 고려하세요.

작동하지 않음 :
-webkit-user-modify : 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); }

이 케이스 는 PhongeGap 애플리케이션에서도 v2.3에서 v4.x 까지 Android에서 작동 합니다. Android 2.3.3이 설치된 Galaxy Y, Android 4.2.2가 설치된 Nexus 4 및 Android 4.1.2가 설치된 Galaxy Note 2에서 테스트했습니다. 따라서 요소 자체에 대해서만 상태를 정의하지 마십시오 .

CSS 파일에서 아래 코드를 사용하십시오.

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

그것은 나를위한 일입니다. 나는 그것이 당신을 위해 일하기를 바랍니다.

이것은 이미지 맵 영역 링크에서 저에게 효과적이지 않았습니다. 유일한 해결책은 ontouchend 이벤트를 캡처하고 핸들러에서 false를 반환하여 기본 브라우저 동작을 방지하여 자바 스크립트를 사용하는 것입니다.

jQuery 사용 :

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

제 경험을 나누고 싶었습니다. 나는 이것을 실제로 작동시키지 않았고 느린 CSS- *를 피하고 싶었습니다. 내 해결책은 좋은 오래된 Eric Meyer의 Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) 을 다운로드 하고 이것을 내 phonegap 프로젝트에 추가하는 것이 었습니다. 그런 다음 추가했습니다.

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

내 경험상 이것은 *에 대한 더 빠른 접근법이지만 덜 이상한 버그에 대한 접근법이기도합니다. tap-highlight, -webkit-user-modify : read-write-plaintext-only의 조합과 예를 들어 텍스트 강조 표시를 비활성화하면 많은 문제가 생겼습니다. 최악의 경우 갑자기 키보드 입력이 작동을 멈추고 키보드 시각화가 느려집니다.

주황색 강조 표시가 비활성화 된 상태에서 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;
}

나는 이것을 시도하고 잘 작동했습니다 :-

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

이것은 탭뿐만 아니라 호버링에서도 작동합니다.

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

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

 />

Ionic에서이 작업은 CSS 파일에 넣어 덮어 쓰기 만하면됩니다.

:focus {
    outline-width: 0px;
}

디자인에서 윤곽선을 사용하지 않는 경우 다음 작업을 수행해야합니다.

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

테두리 윤곽을 비활성화하는 다음 코드를 시도하십시오.

개요 : 없음! 중요한;