18

Android 4.1.2 の Phonegap 3.0 アプリで要素をタップすると、恐ろしいハイライトを完全に取り除くのに問題があります。

いくつかの要素をタップすると、最初にタップされた要素の下にオレンジ色 (この場合) のハイライトが表示されますが、すぐに親要素 (または別の祖先要素、どちらか不明)もハイライト表示されます!

透明色を設定することでタップハイライトを「無効」にできることを知っています：

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

これは、アプリ内のほとんどのクリック可能な要素で実際に機能しますが、一部の要素では、親/祖先要素がまだ強調表示されます! テストしているデバイス（Samsung Galaxy S3）でどのように見えるかを示すデモを作成しました。はい、そのとおり。私はjsfiddleをアニメーションツールとして使用しています:-)

別のスレッドで説明されているすべてを試しました: Disable orange Outline Highlight on focus。

上記のCSSルールでタップされたすべての要素でタップハイライトが実際に消えるため、この2番目に大きなハイライトがタップ以外の何かを示しているのではないかと疑い始めています. しかし、cssルールを拡張して適用しようとしましたが、*:hover, *:active, *:focus成功しませんでした。

私はまた、CSS の外部と Android アプリ自体の問題を攻撃しようとしました。WebSettings の最初の setLightTouchEnabled()は有望に見えましたが、A) 機能しませんでした。B) API レベル 18 以降は廃止され、効果がありません。

私はここで本当に途方に暮れています。どんな助けでも大歓迎です。

4

6 に答える 6

4

必要なものは次のとおりです。

ウェブキットのタップカラー

最後にビデオをご覧ください。それが正しいかどうかをお知らせします。:)

これがgitハブプロジェクトです

ギットハブ

于 2013-09-27T19:56:00.240 に答える
2

既存の CSS に「outline」プロパティを追加することで、これらのアウトラインと境界線を取り除くことができるはずです。

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

}

必要に応じて、各行に !important を追加します。これは、phonegap がいくつかの既定のスタイルもうまく処理しているように見えるためです。

于 2013-09-24T22:02:52.010 に答える
1

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

ユーザー側で、[設定] -> [アクセシビリティ] -> [Web スクリプトのインストール]に移動し、それを [許可しない] に変更すると、ハイパーリンクの周りにハイライトが表示されなくなることがわかりました。 （スクリーンショットを参照）

残念ながら、私は phonegap にアクセスできないため、実際の状況を再現できません。

于 2013-09-23T16:16:13.307 に答える
1

あなたはこれを試すことができます、

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

これにより、ケースのタップハイライトカラーが削除されます。

于 2013-09-27T14:30:42.283 に答える
1

あなたの場合、これを試してください、

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

これでうまくいくと思います。できなかったら返信してみてください..

于 2013-09-23T12:40:50.963 に答える