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 current field.

how can i remove the above field..

my css is

.login-screen input.login {-webkit-border-radius:4px; width:90%; border:none; height:33px; -webkit-box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9); box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9);  padding-left:10px; margin-bottom:10px;}

html

<td align="center"><input type="text" id="vEmail" name="vEmail"  title="Enter Email" value="" alt="" class="login"  /></td>
      </tr>
      <tr>
        <td align="center" ><input type="password" id="vPassword"  name="vPassword"  title="Enter Password" value="" alt=""   class="login"/></td>
      </tr>

i hope u can understand more by seeing this image!

if i remove the i scroll its working fine... how can i make it work even though i scroll is used

Answer 1

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 2

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 3

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/