108

jQuery、jqTouch、phonegap を使用してアプリをコーディングしていますが、ユーザーがソフト キーボードの [移動] ボタンを使用してフォームを送信したときに発生する永続的な問題に遭遇しました。

を使用してカーソルを適切なフォーム入力要素に移動するのは簡単ですが$('#input_element_id').focus()、オレンジ色のアウトライン ハイライトは常にフォームの最後の入力要素に戻ります。(フォーム送信ボタンを使用してフォームを送信すると、ハイライトは表示されません。)

必要なのは、オレンジ色のハイライトを完全に無効にするか、カーソルと同じ入力要素に移動させる方法を見つけることです。

これまでのところ、CSS に以下を追加しようとしました。

.class_id:focus {
    outline: none;
}

これはChromeでは機能しますが、エミュレーターや電話では機能しません。また、jqTouchtheme.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プロパティは、どちらのブラウザでも機能しないようです。

4

16 に答える 16

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

あなたのcssファイルで。それは私のために働いた！

于 2012-06-16T21:25:48.867 に答える
18

Android の入力フォーカスのオレンジ色のボックスを削除します

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

ほとんどのバージョンで、tap-highlight-color

4.0.4のユーザー変更

于 2012-11-06T17:03:30.127 に答える
10

この CSS を使用-webkit-user-modify: read-write-plaintext-only;すると、その恐ろしい強調表示の「バグ」が取り除かれますが、特定のキーボードを提供するデバイスの機能が失われる可能性があることに注意してください。Samsung Tab 2 で Android 4.0.3 を実行している場合、数字キーボードを取得できなくなりました。type='number' &/or type='tel' を使用しても。非常にイライラします！ところで、タップのハイライト色を設定しても、このデバイスと OS 構成の問題は解決されませんでした。Android用のSafariを実行しています。

于 2013-02-19T21:44:51.400 に答える
7

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

このケースはAndroid v2.3 から v4.xの PhongeGap アプリケーションでも機能します。Android 2.3.3 を搭載した Galaxy Y、Android 4.2.2 を搭載した Nexus 4、Android 4.1.2 を搭載した Galaxy Note 2 でテストしました。したがって、要素自体の状態に対してのみ定義しないでください。

于 2013-02-21T12:19:30.890 に答える
3

私は自分の経験を共有したかっただけです。私はこれを実際に動作させることができず、遅い 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 の組み合わせと、たとえばテキストの強調表示の無効化は、多くの頭痛の種をもたらしました。最悪の 1 つは、突然キーボード入力が機能しなくなり、キーボードの視覚化が遅くなることです。

オレンジ色のハイライトを無効にして 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;
}
于 2013-07-19T20:19:55.763 に答える
2

これは、イメージ マップ エリアのリンクでは機能しませんでした。唯一の機能する解決策は、ontouchend イベントをキャプチャして JavaScript を使用し、ハンドラーで false を返すことでブラウザーの既定の動作を防止することでした。

jQuery を使用:

$("map area").on("touchend", function() {
   return false;
});
于 2013-03-08T08:20:05.793 に答える
1

これはタップだけでなく、ホバーでも機能します。

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
于 2013-05-02T15:50:45.653 に答える
0 
<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />
于 2013-12-13T05:21:56.137 に答える
-1

デザインでアウトラインを使用しない場合、これでうまくいくはずです。

*, *::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;
}
于 2013-08-18T21:16:44.720 に答える