11

Android WebKit draws a white background + border on a textareas and inputs when they have focus. How do I stop it from doing that?

no background image on focused textarea

I've tried changing -webkit-tap-highlight-color, -webkit-appearance, -webkit-backface-visibility, outline, and a handful of other things, nothing seems to work. Help!

Clayton Rabenda
  • 5,229
  • 2
  • 19
  • 16

2 Answers2

8

EDIT

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.

I started digging into the source and I believe the problem lies on the WebTextView class. The class that handles textviews and textareas.

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.

A good solution would be to extend this class and fix it. Unfortunately there is no WebTextView class in the sdk. Meaning you can't override it.

I tried all sorts of javascript to change the textarea color, even overlapping the element but it doesn't help. It's not something we can reach from within the html code.

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.

EDIT

I stand corrected. Thanks to @grandstaish for the focus suggestion, we can easily change the background color after the TextView is created. I've attempted to use ViewTreeObserver 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:

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

}

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.

Community
  • 1
  • 1
caiocpricci2
  • 7,714
  • 10
  • 56
  • 88
  • I've seen this work on some versions of android(I don't know what version, that tablet got smashed). On my current tablet running 4.0.x it doesn't work... What version of android are you running? – Clayton Rabenda May 23 '13 at 16:26
  • That's an issue on 4.0.3 only apparently. And as far as I can say there is no solution. – caiocpricci2 May 23 '13 at 18:30
  • I finally got time to go back to this. I actually just overrode the weebview's OnHierarchyChangeListener and set every view to transparent in onChildViewAdded. Like you said, I can't choose which ones will have this, but this works for my particular application. Thanks so much for taking time to help me! :D :D – Clayton Rabenda Jul 23 '13 at 19:54
  • Glad it helped! Tbh I'm really glad you asked or I'd never learn about this bug. I managed to fix it in the published apps we've got! Well spotted! – caiocpricci2 Jul 23 '13 at 20:07
1

Android places a native textview on top of the web text field when it is focused. This is code that you can't stop from happening, it's built into the webview.

You can work around it by setting the native textview's visibility to View.GONE. If you need any more information about how to do this, let me know!

Edit: I just checked the source code for Jellybean, and this behavior seems to have changed. There is no native overlay WebTextView on Jellybean! Perhaps the tablet that you saw your background on was a Jellybean tablet. Anyway, what I said still applies for ICS and below.

Bradley Campbell
  • 9,298
  • 6
  • 37
  • 47
  • Don't know about him but I would love need more information about this if you can provide. How exactly can you target specifically that textview? – caiocpricci2 May 27 '13 at 11:00
  • If this is for a web app, there are a couple ways you could do it. Either using a ViewTreeObserver (http://developer.android.com/reference/android/view/ViewTreeObserver.html) to listen for focus change, or just call getCurrentFocus() from the parent view. – Bradley Campbell May 27 '13 at 23:51
  • I will try this as soon as I can. Unfortunately more urgent issues have come up and I won't have time to try soon. I'll make sure you get your bounty when I try it though. Thanks! – Clayton Rabenda May 28 '13 at 20:25
  • Cool. You should be able, on the focus change event by the ViewTreeObserver, test to see if the new focus is an instance of EditText by using "if(newFocus instanceof EditText)". If it is, just set it's visibility to gone. – Bradley Campbell May 28 '13 at 23:15