web-dev-qa-db-ja.com

Androidブラウザの入力オーバーレイを無効にしますか？

いくつかのテキスト入力を含むWebページがあります。 Androidブラウザ（少なくともAndroid 2.3.4で、これがすべてです）は、ページ上の入力に対する独自のコントロールをオーバーレイしているようです。フォーカス。

問題は、オーバーレイされたコントロールが白い長方形であり、見苦しいことです。それを無効にする方法、または何らかの方法でスタイルを設定する方法はありますか？

UPDATE：

Androidエミュレータの例：

enter image description here

丸い角と背景は失われます。実際のデバイスでは、コントロールの周囲に境界線も表示されません。

おそらくjQuery Mobileを使用していることに言及する必要があります。私のテストデバイスはHTC Evo 4Gです。

関連する質問：

入力時にフォーカスのスタイルが異なります

HTCデバイスで強調表示されている場合、WebViewの入力要素は常に同じスタイルになります

androidhtmlcssjquery-mobileandroid-browser
44
Alex Korban

最後に、Android 2.3デバイスでこの問題を解決しました。

オーバーレイを実際に削除することはできませんが、ビューポートの外側にオーバーレイを移動することは可能です。

オーバーレイは、入力フィールドと同じ位置に自分自身を配置しようとします。割り当てた幅と位置オフセットをコピーします

position:relative

そして

top:-10000px

ただし、オーバーレイは、割り当てられた位置オフセットをコピーしません

-webkit-transform: translate3d()

これにより、iScrollなどのJSライブラリでいくつかの問題が発生します。

しかし、これはオーバーレイを隠すのにも役立ちます：

input[type="password"], input[type="text"]{
  position:relative;
  top:-10000px;
  -webkit-transform: translate3d(0, 10000px, 0);
}

入力フィールドをビューポートの外側に配置します。オーバーレイはその横に配置されます。次に、translate3d（）を使用して古い位置に移動します。

モバイルWebフレームワーク「qooxdoo Mobile」で既にこのソリューションを使用しています： http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

19
czuendorf

次のコードはタップのハイライトを削除します-[Android 4.0.3]

input{
   -webkit-user-modify: read-write-plaintext-only;
   -webkit-tap-highlight-color:#3072af;
}
14
Praveen Vijayan

これが有効な解決策であり、答えかどうかはわかりませんが、入力をAndroidでコメントアウトした後、すべてが私のAndroid（HTC2 .3）テキストの入力と選択

/* really bad */
-webkit-backface-visibility: hidden; 

/* your normal bad */
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
transform: rotateY(0deg);

デフォルトの入力をスタイルする場合は、これらを使用しています：

/* native placeholder styling */    
::-webkit-input-placeholder {
    color:#555555;  
    }
:-moz-placeholder {
    color:#555555;  
    }   
.inField label {
    color:#555555;
    cursor: text;   
}

最初のWebキットをコメントアウトした後、Androidは問題なく動作しています。他の多くのものもオーバーライドしています。

以下のスクリーンショットもご覧ください。

入力で行ったことは、リストビューを作成し、すべての入力をリストアイテムに入れて、すべてのinput-JQM-CSSを削除することです。これにより、リストビュー項目の上に透明な入力が表示されるはずです。入力にラベルを追加することもできます。私の例は、inFieldラベルプラグインで動作するように設定されているため、これらのクラスもすべて既に搭載されています。

スクリーンショットはAndroid HTC 2.3.5で、入力type = "search"を示しています。これはほとんどのJQM-cssを削除したリストビュー検索フィルターです。リストビューをさらに下に置いて、フォームリストに配置し、ラベルを追加して（アクティブかどうかを確認できない）、アイコンを含むすべてのCSSを削除しました。

リストフォームの作成方法の例を次に示します。

 <ul data-role="listview" data-inset="true" class="inputList">
    <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
        <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
        <label for="item">item</label>
        <input type="text" name="item" id="item" />
        </div></div>
     </li>
     <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
        <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
        <label for="item2">item2</label>
        <input type="text" name="item2" id="item2" />
        </div></div>
     </li>
  </ul>

CSS：

.inputList li div.ui-btn-inner {
    background: none;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    }
 .inputList label {
    margin: 3px 0 0 !important;
    }
 // styling of text inputs! 
 .inputList input.ui-input-text, .inputList textarea.ui-input-text {
    width: 93%; 
    margin-left: 1%;
    padding: 0.6em 0;   
    text-indent: 80px; /* hard-coded - doesn't work on Android */
    border-width: 0px;
    background: transparent;    
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;   
    -moz-border-radius:0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;
    }
.inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner {
    padding: 0px !important;    
    }
// labels, from inField label plugin, but not active
.inField { 
    position:relative 
    }
.inField label { 
    line-height: 2.25em;
    vertical-align: middle;
    position:absolute; 
    left:8pt;
    width: inherit !important;  
    }

これがすべてCSSであることを願っています。これを設定しようとしていて、それが不器用に見える場合は、お知らせください。

私のHTC 2.3.4では、このように動作するのは非常に良いようです。私のCSSにはまだ磨きが必要です。入力幅を縮小して、align：centerにする必要があるため、下のリストアイテムの境界線は表示されたままになります。

それ以外は、これは不器用なAndroid入力に対するニースのソリューションです。すべてのJQM-CSSを削除し、listview-liを後に置きます。

Android listview search filter input

13
frequent

ここに私のコードがあります：

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

私はここで推測しているだけで、おそらくあなたはすでに試したことがありますが、

-webkit-appearance: none;

トリックを行うことがあります。 Androidデバイスもありませんが、iPhoneでは、デフォルトのブラウザに適用されたスタイリングが完全に削除されるため、ほとんどの入力関連のスタイリングの問題が解決されます。

4
will
-webkit-user-modify: read-write-plaintext-only;

-webkit-tap-highlight-color：rgba（0,0,0,0）;アウトラインスタイル：なし。

これはAndroid 4.0で正常に動作しますが、このコードを数値入力フィールドに使用すると、bcozのread-write-plaintext-onlyがサポートされない場合、この問題が発生します。

3
Râjâ Mca

Czuendorfパッチのmacnerd分析を確認します。これらの動作は、Androidバージョンごとに大きく異なります。 Android 4.0.3を使用して実際のHtcデバイスでテストし、アウトラインが消えました（素晴らしい！）が、いくつかの深刻なキーボードの問題が発生しました（フィールドに単一のキー押下が表示されない、奇妙な行動...）。エミュレーターでは、キーボードの問題は発生しません。実際のデバイスに対する解決策は見つかりませんでした。それは残念だ！

1
demarcom

@ czuendorf、5月13日13:53：私のためにも働いた（Android 4.0）。

ただし... type = "number"で入力を使用する場合、フィールドを入力しても数値キーボードはポップアップしなくなりますが、代わりに通常のキーボードが表示されます。

-webkit-user-modifyを削除すると、右側のキーボードが再び表示されますが、入力要素は編集中に境界線付きで表示されます。私の場合、入力オーバーレイはレイアウトを台無しにしました（一部のコンテンツを上下に動かしました）が、この新しいcssコードではもう起こりません。

1
macnerd