Не удается полностью избавиться от цвета подсветки клавиш в приложении Phonegap 3.0 на Android 4.1.2

У меня есть проблемы, полностью избавляющиеся от страшной подсветки при нажатии на элемент в приложении Phonegap 3.0 на Android 4.1.2.

Когда вы нажимаете на некоторые элементы, я сначала получаю оранжевый (в данном случае) выделение под элементом tapped, но затем в быстрой последовательности родительский элемент (или другой элемент предка, не уверенный, который) также показывает выделение!

Я знаю, что подсветка выделения может быть отключена настройка прозрачного цвета:

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
}

Это действительно работает для большинства интерактивных элементов в моем приложении, но на некоторых элементах элемент parent/ancestor по-прежнему выделяется! Я создал demo, который показывает, как он выглядит на устройстве, на котором я тестирую (Samsung Galaxy S3). Да, это так. Я использую jsfiddle в качестве инструмента анимации: -)

Я пробовал все, что обсуждалось в другом потоке: Отключить выделение оранжевого контура в фокусе.

Так как подсветка элемента на самом деле исчезает на всех элементах, постучанных с помощью правила css выше, я начинаю подозревать, что это вторичное большее выделение указывает на что-то другое, кроме крана. Но я попытался расширить правило css, чтобы также применить к *:hover, *:active, *:focus без успеха.

Я также пытался атаковать проблему вне css и самого приложения Android. Первый setLightTouchEnabled() в WebSettings казался многообещающим, но A) он не работал и B) Из уровня API 18 он устарел и не имеет эффект.

Я действительно в растерянности. Любая помощь вообще была бы высоко оценена.

Ответы

Ответ 1

Вот что вам нужно.

Цвет сетевого экрана

просмотрите видео в конце. сообщит вам, правильно это или нет.:)

и здесь проект git hub

github

Ответ 2

Вы должны быть в состоянии избавиться от этих контуров и границ и добавив свойство 'outline' к существующему css:

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   outline: 0;

}

Необязательно добавьте! важно для каждой строки, поскольку, по-видимому, телефонная игра жонглирует и по умолчанию.

Ответ 3

в вашем случае попробуйте это,

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

Значение альфа-значения здесь равно нулю должно сделать его "невидимым".

также есть еще несколько строк, чтобы заставить его работать нормально,

Пожалуйста, обратитесь к классу .link в обновленном fiddle

.link {
    display: block;
    padding: 5px;
    border-style:none; 
    outline-style:none; 
    -webkit-appearance: textarea;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-tap-highlight-color: transparent;
}

Другие вещи остаются такими же.

Кроме того, в случае (особенно iPhone) я видел, что вы возвращаемся из события.

То же, что и preventDefault в jQuery, поэтому в phoneGap это также может работать, поскольку это также основанная на JS фреймворк.

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

Я думаю, что это будет сделано, пожалуйста, попробуйте ответить, если не сделали.

Ответ 4

сторона CSS:

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

Я обнаружил, что на стороне пользователя, перейдя в Настройки- > Доступность- > Установить веб-скрипты и изменив это на "Не разрешено", перестает показывать выделение вокруг гиперссылок. (см. снимок экрана)

К сожалению, у меня нет доступа к телефонной запинке, поэтому я не могу воспроизвести вашу реальную ситуацию.

Ответ 5

Вы можете попробовать,

* {
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0) !important; 
   -webkit-user-modify: read-write-plaintext-only;
}

Это должно удалить цвет выделения для вашего случая.

Ответ 6

Я нашел это в сообщении, которое также может быть очень интересным, так как вы можете отредактировать свой CSS для своих нужд:

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

http://phonegap-tips.com/demos/webkit-tap-highlight-color.html

Или, если вы хотите быть фантазией: https://material.google.com/motion/choreography.html#choreography-creation