Phonegap input type password field focus

Question

I developed an app in phonegap . In input tag if i give type=\'text\' it is works well . but when i give input type=\'password\' an another field is opening over to the curr

Answer 1

Check out this fiddle for the Login/Register page.... Use password field like that as given in the fiddle

http://jsfiddle.net/elijahmanor/3Rmdm/1/

Answer 2

Here is an easier solution!

Change <input type="password" />

to

<input type="text" class="password-field" />

In your CSS style sheet(s).

input.password-field {
     -webkit-text-security: disc;
}

http://css-infos.net/property/-webkit-text-security

I am building a PhoneGap (cordova) ANdroid app and i spent about 18 hours so far trying to find a fix, destroying the iScroll instance kind of works if the password field is on the screen and not below the scrolling area... The webkit text security CSS property is a much better fix and i've done some research on this CSS property and it seems like all the Android versions run webkit so you should be good to go for all versions of Android with this fix!

Answer 3

I've been able to avoid this be using android:windowSoftInputMode="adjustNothing". +Sandy09 is right about the overlay + position. It seems the only good way to avoid this is to prevent android from moving the contents on IME start (adjustNothing), and also be preventing the contents inside the webview from moving at all. This also seems to break all CSS3 3d/3d transforms, even simple scales and transform-origin can break it.

There is worse news tho: at some point i had password boxes working fine, then due to CSS changes it came back permanently. At some point if the browser is slowed down enough (canvas) the Window seems to lose its ability to track the input box. For us, this led to SIGSEGVs every time we pressed the 7 (seven) key on the IME. This was on ALL android devices too, Regardless of version.

I gave up on all of this and just made my own KeyboardView. I'm a little happier now.

Answer 4

This is not the problem with Phonegap.. this issue is also occurs in the webview.. in many devices like (samsung, sony, and emulator etc) the password field is overlay with the another field and rest of fields works fine. coming to HTC this issue will rises in the all type of fields..

normally this overlay field covers exact to the bottom field and looks like only one field. but when we use the iscroll to apply scrolling property, the ovelay misplace as in the above fig.

solution: onfocus on the field disable the iscroll and onblur refreshing the iscroll is an temporal solution which works fine.

but this is not right solutions in all cases.

waiting and trying for better solution..