La textarea focalizzata su Android WebKit non disegna l'immagine di sfondo

Question

Android WebKit disegna uno sfondo bianco + il bordo su un textareas e inserisce quando hanno il focus. Come faccio a impedirgli di farlo?

Ho provato a cambiare -webkit-tap-highlight-colore, -webkit-aspetto, -webkit-backface visibilità, contorno, e una manciata di altre cose, nulla sembra funzionare. Aiuto!

Answer 1

EDIT

Ok, in modo da dimenticare tutto quello che avevo in precedenza risposto. Ho eseguito alcuni test e questo sembra essere un problema solo su Android 4.0.3. E ci sono alcune brutte notizie.

Ho iniziato a scavare nella fonte e credo che il problema si trova sulla classe WebTextView. La classe che gestisce le visualizzazioni di testo e i textareas.

Se si vede sulle linee 233-240 il metodo che disegna lo sfondo disegna sempre un rettangolo blu e un rettangolo bianco all'interno. Quale è esattamente ciò che mostra il tuo screenshot.

Una buona soluzione sarebbe quella di estendere questa classe e risolvere il problema. Sfortunatamente there is no WebTextView class in the sdk. Significa che non puoi scavalcarlo.

Ho provato tutti i tipi di javascript per modificare il colore textarea, even overlapping the element ma non aiuta. Non è qualcosa che possiamo raggiungere dal codice html.

Quindi non è possibile risolvere il problema su java e non è possibile risolvere il problema su javascript. Temo che non ci sia una soluzione per questo problema.

EDIT

mi correggo. Grazie a @grandstaish per il suggerimento focus, possiamo facilmente cambiare il colore di sfondo dopo che è stato creato il TextView. Ho tentato di utilizzare ViewTreeObserver per una soluzione elegante ma non potevo scegliere come target solo le visualizzazioni che volevo. Ogni TextView avrebbe uno sfondo trasparente e io non volevo quello. Quindi un approccio ibrido risolto:

HTML:

<div style="background:red; position:relative; width:100%; height:500px; z-index:0;" id='behind' > 
    <textarea name="Name"style="background:green; border:none; height:100px; width:250px; position:absolute; top:0; left:0; z-index:1;" 
      id='area1' onFocus='runOnFocus()' ></textarea> 
    </div> 

JS:

function runOnFocus(){ 
if (window.device.platform == "Android" && window.device.version =="4.0.3") 
//I had to set a timeout here or this would trigger before the TextView was created. 1ms seems to be enough though. 
window.setTimeout(function(){ 
     window.AndroidLayer.setBackground();},1);   
} 

Java:

private String TAG = "TextArea"; 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     super.loadUrl("file:///android_asset/index.html"); 
     appView.addJavascriptInterface(this, "AndroidLayer");      
    } 

public void setBackground(){ 
    runOnUiThread(new Runnable() {   
     @Override 
     public void run() { 
      Log.d("native","gotFocus"); 
      View tv = (View) appView.getFocusedChild();  
      if (tv == null) 
       Log.d("native","isNull"); 
      else 
       tv.setBackgroundColor(Color.TRANSPARENT);    
     } 
    }); 

} 

in modo che possiamo controllare quali elementi della pagina attiveranno il cambiamento di sfondo. Non riuscivo a trovare eventuali effetti collaterali indesiderati a questo, ma non ho avuto il tempo di provarlo in tutte le versioni, così ho scelto di limitare al 4.0.3, l'unica versione che ho trovato con tale questione.

Answer 2

Android posiziona un textview nativo sopra il campo di testo Web quando è attivo. Questo è un codice che non puoi smettere di accadere, è integrato nella webview.

È possibile aggirare il problema impostando la visibilità del textview nativo su View.GONE. Se hai bisogno di ulteriori informazioni su come farlo, fammi sapere!

Modifica: ho appena controllato il codice sorgente di Jellybean e questo comportamento sembra essere cambiato. Non c'è overlay nativo WebTextView su Jellybean! Forse il tablet su cui hai visto lo sfondo era un tablet Jellybean. Ad ogni modo, quello che ho detto vale ancora per ICS e sotto.