strange behaviour of Javascript handling of textbox input on Android devices

Question

I am seeing strange behavior by Javascript on Android devices. I want an HTML textbox that behaves very like a password field - the characters are obscured as the user types. I have reduced the code to a single line. Works fine on my PC, on iPhone, and on iPad. But not my Moto phone or Samsung tablet, both of which are running Android.

  <input type='text' ID='txtPseudoPassword' name='txtPseudoPassword' onkeydown = 'if (event.keyCode != 8 && event.keyCode != 46) { document.getElementById("txtPseudoPassword").value += "#"; return false; } else return true; ' >

I have tried using event.preventDefault(); as well as return false; but it makes no difference. I have tried onkeypress instead of onkeydown, but similarly, the devices that already work continue to do so and the Android devices don't.

So if I type 'ABC' into an iPad, I see '###'. If I type it into either of the Android devices at my disposal, I get '#A#AB#ABC'.

Another example might be helpful (at least in ruling out 'use a password field'). Take this line

<input type='text' ID='txtPseudoPassword' name='txtPseudoPassword' onkeydown = 'if (event.keyCode != 8 && event.keyCode != 46) { document.getElementById("txtPseudoPassword").value += String.fromCharCode(event.keyCode) + String.fromCharCode(event.keyCode) ; return false; } else return true; ' >

On non-Android, it doubles any character entered. On Android, well .. try it and see

I nearly added "please don't suggest I use a password input, I have a reason for what I want to do" - darn — DJDave, Feb 21 '19 at 21:39
Care to share? The more we know about what you are trying to do, the more accurate help we can give. — Scott Marcus, Feb 21 '19 at 21:45

score 0 · Answer 1 · answered Feb 21 '19 at 16:23

// change this
<input type="text" ...
// to this
<input type="password" ...

The password behavior is sometimes automated by detecting the string password in other input attributes, but it's safer and more cross-platform to directly precise it in the input type attribute.

score 0 · Answer 2 · answered Feb 22 '19 at 15:50

OK, just in case it helps anyone, the problem appears to be that Android doesn't handle the key strokes properly (keyCode on android is always 229), and the solution (hopefully) is to use a different type of control with the contenteditable attribute set. Something along these lines

<p contenteditable ID='pPseudoTextField' name='pPseudoTextField' style='border-style: solid; border-width: 1px; height:20px; width: 150px;' oninput = 'document.getElementById("hdnCounter").value = parseInt(document.getElementById("hdnCounter").value) + 1; document.getElementById("pPseudoTextField").innerHTML = "#".repeat(document.getElementById("hdnCounter").value)'></p>

strange behaviour of Javascript handling of textbox input on Android devices

2 Answers2