Input Elements on Android 4.X Can Not Be Styled When Focused

Input elements on android 4.x can not be styled when focused

The problem is related to the Nexus S and its poor performance with ICS / Android 4. The roar of problems with Phonegap, jQuery mobile, Sencha and on is deafening. From the ignoring of Viewport meta tags to mal-positioned z-order, The Chromium Android browser is just a massive problem.

1. Have you tried turning off openGL?

2. Have you tried separating the pseudo selectors?

It seems that Androids WebView is continually getting worse... which is odd as it "should" be improving. I'm having a ton of trouble myself with scrolling and flickering. A lot of frameworks are actually considering bailing on Android.

A link that may interest you:
Problems with jQM and (mostly) Nexus S
https://forum.jquery.com/topic/jquerymobile-1-0-does-not-support-android-4-0-ice-cream-sandwich

Hope this helps and you are not alone!

Input has different style on focus

The Android-WebKit-Browser seems to add a special overlay box to the input type "password" on focus (I think to apply this special mobile masking where the last letter typed is still visible) which ignores all styling except the "-webkit-tap-highlight-color" property.

So you will be out of luck styling these input boxes. Btw. styling of input boxes doesn't work at all on devices with HTC Sense, have a look here:

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

Oh, one exception: the stylings seem to work on samsung devices (at least on Galaxy S and I5800)

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

It could be related to: How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?.

Alternatively, you may be to work-around it by using a native app containing a WebView, and then apply a theme in res/values/themes.xml to your app which overrides webTextViewStyle with your own style:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="@android:syle/Theme">
        <item name="android:webTextViewStyle">@style/MyWebTextView</item>
    </style>
</resources>

Then assign this to you app in the Manifest:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mywebapp" android:versionCode="1" android:versionName="1">
    <uses-permission android:name="android.permission.INTERNET" />

    <application android:icon="@drawable/icon" android:label="@string/app_name"
        android:theme="@style/MyTheme">
        .
        .
        .
    </application>
</manifest>

Then simply load your html in to your WebView and see if the text input control has adopted the new style.

How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?

This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.

The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.

Android + Sencha Touch text input duplicated and difficult to un-focus

These are browser bugs, triggered by some CSS-flags.

To explain the bug:
The device creates some kind of "screenshot" from the web-sites content. All transformations and transitions are made on top of the "screenshots" from the actual page.

If you have input elements, there will be some kind of proxy elements rendered on top of the "screenshot". Sometimes the are these proxy-elements at the wrong position.

This happens, if you trigger the website to be hardware-accelerted. You have to drop some CSS-definitions:

transform(), translate(), transform3d(), translate3d().

The Bad news are:
You cannot solve this problem, because it a bug within the browser.

I have some different android devices, all have different problems, one fix will break another device.

I think the bug will never be solved, because noone cares about the embedded browser since android 4.1 and the chrome.

If you can disble hardware accelertion, this may help.

The good news are:
There are rumors about an embeddable chrome-webview.

I started to write some blogposts about "the new IE":
http://christian-kuetbach.de/blog/post/14

Android does not correctly scroll on input focus if not body element

This is a bug in the Android native browser. By the way, the input scrolls into the view after a character is typed on the soft keyboard.

The following code snippet placed somewhere in the page should help:

if(/Android 4\.[0-3]/.test(navigator.appVersion)){
   window.addEventListener("resize", function(){
      if(document.activeElement.tagName=="INPUT"){
         window.setTimeout(function(){
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

How to make a TextInputEditText unfocused by default in android?

Try adding this to the root layout.

    android:focusableInTouchMode="true"

or adding this code on your manifest inside the activity tag

android:windowSoftInputMode="stateUnchanged"

Input UI elements focus color issues (appcompat 21)

At the moment appcompat-v7 doesn't support AutoCompleteTextView when it comes to material design style for older versions of Android.

From the Docs:

The Theme.AppCompat themes provide material design styles for these
widgets:

• EditText
• Spinner
• CheckBox
• RadioButton
• SwitchCompat
• CheckedTextView

That's probably why you're facing this issue.

Styled-components react native - Text Input onBlur not working

Found my issue. It's a stupid mistake. Happened to be passing the prop onBlur to the Input component which was overriding the onBlur I was trying to set on the TextField styled-component.

---

Related Topics