Android browser input type number

Question

Issue in Android browser (4.03) for below markup.

<html> 
<body> 
Androind 4.03 Browser test page<br />
Type .9 in the input field below and click/tap button below.<br />
Browser validation is clearing contents in input field.<br /></br/>


<input type="number" pattern="[0-9\.]*" step="0.1" min="0.0"></input> <br /><br /><br />

<input type="button" value="Validate" />

</body>
</html>

I expect number keypad on focus and it works fine with iphone and androind 2.x browsers. But when I enter decimal less than 1 like .9 or .1 it does validate onblur and clear input field.

I expect input to accept any numbers and decimals...

Run code sample here

Kurt · Accepted Answer · 2013-12-19 21:48:20Z

1

Old post, but I've run into this as well.

What I've done to work around it is to catch '.' on keydown (keyup worked fine on android, but caused problems on IOS), and set the value to 0 before the . is applied. I noticed, however, that on the android browser at least, this interfered with the ability to completely erase the number after that (if you were to backspace), so I had to catch that too.

// within a keydown handler for the input, 
// where "this" is the input, and "e" is the event

// make it 0 before the . gets applied
if((e.keyCode == 190 || e.keyCode = 46)
    && (!this.value || this.value == '.'))
{
    this.value = 0;
    return;
}

// ...but that screws up the cursor position on
// some browsers, so handle the backspace 
if(e.keyCode == 8 && this.value == '0.')
{
    this.value = '';
    return;
}

Feels hacky, but seems to work.

edited Dec 19, 2013 at 21:48

answered Dec 18, 2013 at 23:10

Kurt

3961 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Android browser input type number

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related