Development issue/problem:

I have a web page with text input. The browser on Android (at least on Android 2.3.4 is all I have at the moment) seems to impose its own control on the input of pages in focus.

The problem is that the overlay command is a white rectangle and it is ugly. Is there a way to deactivate it or design it in a certain way?

UPDATE:

Here is an example of the Android emulator:

The rounded corners and the bottom are lost. On the device itself, I don’t even see a line around the controls.

It’s probably worth mentioning that I use jQuery Mobile. My test device is the HTC Evo 4G.

Related issues :

The contribution has a different accent

Input elements in WebViews always have the same style as they are marked on HTC devices.

How can I solve this problem?

Solution 1:

Finally, I solved this problem for Android 2.3 devices.

You can’t really remove the overlay, but you can remove it from the viewing window.

The overlay tries to position itself in the same place as the input field.
It copies the width and offset of the position you specified with

Position: relative

и

top:-10000px

However, the overlay does not copy position compensations made via

-webkit transformation: translate3d()

This causes several problems with JS libraries such as iScroll.

But it also helps us hide the overlay:

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

The input field is out of sight. The lid is placed next to it. Now use transl3d() to go to the old position.

We already use this solution in our qooxdoo Mobile web framework :
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform.

Solution 2:

The following code deletes the touch light – [Android 4.0.3].

input{
-webkit-user-modify: read-write text only;
-webkit-tap-highlight color: #3072af;
}

Solution 3:

I’m not sure if this solution and answer works, but my entries started getting dirty after I commented on my Android (HTC2.3).

/* very poor */
– Rear view: erased ;

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

If you want to design standard inputs, I’ll use them:

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

After commenting on the first webkits Android works well for me. But I’m overcoming a lot of other things.

See also the screenshot below:

What I did with my entries was create a list view, put all my entries in the list-items and delete all JQM-CSS entries. That should give you a transparent contribution at the top of the list, which I think is very good. You can also add tags to your entries. My example is configured to work with the inField tag plugin, so you already have all these classes on board.

The screenshot is from my Android HTC 2.3.5 and shows the input type=search. This is a list-search filter I removed from most JQM-css. I removed it from the list view, put it in the forms list, added a shortcut (I can’t see if it’s active) and deleted all CSS, including the icons.

Here is an example of how I fill in my list forms:

CSS :

.inputList li div.ui-btn-inner {
background: none;
edge-bottom width: 0px;
edge-left width: 0px;
edge-right: 0px;
}
.inputList label {
margin: 3px 0 0 !important;
}
// Text input style!
.inputList input.ui – input text, .inputList textarea.ui – input text {
width: 93%;
left margin: 1%;
fill: 0.6em 0;
hint text: 80px; /* hard-coded – does not work on Android */
border width: 0px;
background: transparent;
-moz-box-shadow : none;
-webkit-box-shadow : none;
box-shadow : none;
-moz-boundary radius: 0px;
-webkit-boundary radius: 0px;
-boundary 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 plugin with inField label, but not active
.inField {
position:relative
}
.inField label {
line height: 2.25em;
vertical alignment: average;
position:absolute;
left:8pt;
width: inherit !important;
}

I hope it’s CSS. If you’re trying to set up this system and it sounds terrible, let me know.

This kind of work is great on my HTC 2.3.4. My SSC still needs to be refined. I need to reduce the width of the entries and align them: centered so that the lower edges of the list of items remain visible.

This would also be a good solution for non-standard input on Android. Just remove all CSS from the JQM and put the checklist behind it.

Solution 4:

Here’s my code:

input {
-webkit-user-modify: read-write-only text;
-webkit-tap-highlight color: rgba(255.255.255.0);
}

Solution No 5:

I’m just guessing, and you’ve probably already tried, but….

-Appe warranty of the webkit : no ;

might help. I don’t even have an Android device, but on an iPhone it solves most of the input style problems, because it completely removes the default style applied by the browser. It’s always worth a try!

Solution No 6:

-webkit-user-modify: read-write text only ;

-webkit tap-highlight color: rgba(0,0,0);
outline style: none ;

It works fine in android 4.0, but if you use this code for a numeric input field bcoz read-write vowel text not only supports, I have this problem, imagine it.

Solution No 7:

@czuendorf, 13. May at 13:53
It worked for me too (Android 4.0 also).

However, if you use input with type=numeric, the numeric keypad will no longer be displayed when you type in the field, but instead the normal keypad will be displayed.

If you delete -webkit-user-modify, the right keyboard will reappear and the input element will be displayed with a frame during editing.
In my case, the overlap of entries disturbed the layout (moved some content down and to the right), but this doesn’t happen anymore with this new CSS code.

Solution No 8:

I confirm McNair’s analysis of the patch. This behavior varies greatly depending on the version of Android. I tested it on a real Htc device with Android 4.0.3, and the contours are gone (great!), but that opens serious keyboard problems (I see a key that doesn’t appear in the box, and other weird behavior…). There is no problem with the emulator keyboard. I haven’t found a solution for the current device. That’s too bad!

Good luck!

android:windowsoftinputmode,android show keyboard programmatically,adjustresize not working,scroll edittext above keyboard android,android keyboard covers text input,android webview keyboard hides input field,overscroll-behavior,stop page from auto scrolling,pull to refresh javascript,disable bounce scroll ios css,refresh page and keep scroll position,disable pull refresh,css mobile keyboard open,css detect mobile keyboard,numeric keypad in mobile browsers html5,virtual keyboard css,inputmode polyfill,mobile keyboard overlap input field,android overlay example,what is android overlay,android 10 overlay permission,google app overlay,what does display over other apps mean,type_application_overlay,safari for windows,bootstrap,how to use webkit in css,webkit-appearance select arrow,webkit-appearance: none,ms css,appearance css webkit,@-moz-document url-prefix(),overscroll-behavior example,chrome://flags/#disable-pull-to-refresh-effect,android prevent keyboard from resizing layout,overscroll-behavior not working,overscroll-behavior safari,disable pull-to-refresh javascript

You May Also Like

15 Best Online Multiplayer Cricket Games for Android [2021]

Cricket is one of the biggest sports in the world and in…

Average Snowmobile Dimensions: Length, Width, and Height

*I may receive commissions for purchases made through the links in this…

10 Best Laptop for Accounting Students | laptops for quickbooks

As a designer, draftsman or mechanical and structural engineer, you must be…

7 Difference Between Xiaomi and Redmi Phones

Not many people know that Xiaomi started out as a software company.…