Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>EDIT</strong></p> <p>Ok, so forget everything I had previously answered. I've ran some tests and this seems to be an issue on Android 4.0.3 only. And there are some bad news.</p> <p>I started digging into the source and I believe the problem lies on the <a href="http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.0.3_r1/android/webkit/WebTextView.java?av=f" rel="nofollow noreferrer">WebTextView</a> class. The class that handles textviews and textareas.</p> <p>If you see on lines 233-240 the method that draws the background always draws a blue rectangle and a white rectangle inside. Which is exactly what your screenshot shows. </p> <p>A good solution would be to extend this class and fix it. Unfortunately <a href="https://stackoverflow.com/questions/15076190/set-the-textcolor-of-android-webkit-webtextview-class">there is no WebTextView class in the sdk</a>. Meaning you can't override it. </p> <p>I tried all sorts of javascript to change the textarea color, <a href="http://jsfiddle.net/b3sxD/1/" rel="nofollow noreferrer">even overlapping the element</a> but it doesn't help. It's not something we can reach from within the html code.</p> <p>So you can't fix it on java and you can't fix it on javascript. I'm afraid there is no solution for this problem.</p> <p><strong>EDIT</strong> </p> <p>I stand corrected. Thanks to @grandstaish for the focus suggestion, we can easily change the background color after the <code>TextView</code> is created. I've attempted to use <code>ViewTreeObserver</code> for an elegant solution but I could not target only the views I wanted. Every TextView would have a transparent background and I didn't want that. So a hybrid approach solved it:</p> <p>HTML:</p> <pre><code> &lt;div style="background:red; position:relative; width:100%; height:500px; z-index:0;" id='behind' &gt; &lt;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()' &gt;&lt;/textarea&gt; &lt;/div&gt; </code></pre> <p>JS:</p> <pre><code>function runOnFocus(){ if (window.device.platform == "Android" &amp;&amp; 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); } </code></pre> <p>Java:</p> <pre><code>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); } }); } </code></pre> <p>So we can control which elements on the page will trigger the background change. I could not find any unwanted side effects to this but I did not have time to test it in all versions, so I've chosen to limit it to 4.0.3, the only version I could find out with that issue. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload