Format number as you type when Android keyboard not showing decimal

Question

Background
When using the default Android browser (internet) on the Samsung Note, and maybe other Andriod device, when editing input field using the type "numeric" , the keyboard, which is a number pad, does not have a decimal button on it!

<input id="x" type="number" value="" />

enter image description here

I noticed the Bank of America Andriod app does not have a decimal on the number pad. This is how they handle it.

click on field
type first number "1" and field display 0.01
type second number "2" and field display 0.12
type third number "3" and field display 1.23
type forth number "4" and field display 12.34

I would like to mimic this functionality on my web site that will be used for from mobile devices.

This demo from mplungjan is very close. I want to show two places decimal all the time and this solution shows does not until the forth character is press:

$("#txtamt").keyup(function(obj, evt) {
var event = (window.event) ? window.event : evt;

    //ignore arrow keys so that user can move curser 
    switch(event.keyCode)
    {
        case 37:
        case 38:
        case 39:
        case 40:
            return;
        default:
            break;
    }                

    var str = document.getElementById("txtamt");
    str.value = str.value.replace(".", "");

    if (str.value.length == 3) {
        var val = parseFloat(str.value);
        var val1 = (val / 10).toFixed(1);
        str.value = val1;
    }
    else if (str.value.length > 3) {
        var val = parseFloat(str.value);
        var val1 = (val / 100).toFixed(2);
        str.value = val1;
    }

});

One obvious solution is just to change the input type and have the standard full keyboard display.

i don understand how if user is trying to give 123 after he enters 1 do u want it to become 0.01 or he enters the complete val n then clicks some button — Harsh, Aug 10 '14 at 13:41
Do you really want to change the contents of the input as the user types? Image I want to type '12' - after hitting '1' the contents will become 0.01, then when I hit '2' it will become 0.00012. — joews, Aug 10 '14 at 13:42

score 1 · Answer 1 · answered Aug 10 '14 at 13:42

1

I think this will work for you using simple javascript

HTML

<input type="text" id="number" onchange="formatNumber()"/>

JS

function formatNumber(){
  var number = document.getElementById('number').value;
  document.getElementById('number').value = ((+number)/100).toFixed(2);
}

DEMO

But this will work when you leave the textbox.

answered Aug 10 '14 at 13:42

Mritunjay

25,338
7
55
68

@Nivedita then it will be difficult to get the expected, you can try changing `keypress` to `keyup` in demo. – Mritunjay Aug 10 '14 at 16:05
yes u r right keyup won't work, but don't you think **this will work when u leave the textbox** makes it less user friendly .. – user63762453 Aug 10 '14 at 18:00

score 1 · Answer 2 · edited May 23 '17 at 11:53

I did a bit of research.

You can write a smart code which first checks if the user has stopped entering value and then converts the input into desired form, like this:

HTML:

  <input type="text" id="num" />

JS code:

var timeoutReference;
$(document).ready(function() {
    $('input#num').keypress(function() {
        var _this = $(this); 

        if (timeoutReference) clearTimeout(timeoutReference);
        timeoutReference = setTimeout(function() {
            number = document.getElementById('num').value;

      document.getElementById('num').value = ((+number)/100).toFixed(2);
        }, 1000);
    });
});

Live Demo

refer this SO answer for more explanation.

score 0 · Answer 3 · answered Aug 10 '14 at 13:39

0

try this, DEMO here

$('#test').change(function() {
    var testValue = parseInt($('#test').val());

    $('#test').val((testValue/100));
});

answered Aug 10 '14 at 13:39

Ashish Balchandani

1,228
1
8
13

This doesn't deal with decimal places – joews Aug 10 '14 at 13:41
but question isn't states that input will be decimal numbers. What OP wants when he input is decimal, Can you please help me @joews – Ashish Balchandani Aug 10 '14 at 13:43
@Barry, can you please check fiddle and revert if you need any further assistance. – Ashish Balchandani Aug 10 '14 at 13:49

score 0 · Answer 4 · answered Aug 10 '14 at 16:23

Check out this JSFiddle demo. This will demonstrate the javascript side of what you want to know:

Click here to visit the JSFiddle demo

They key to getting your magical number is this one line:

var output = parseInt(document.getElementById("inputID").value)*.01;
document.write(output);

score 0 · Accepted Answer · answered Aug 11 '14 at 14:26

This solution mimics the functionality and use case described in the question. I added the type and value property to the input field.

Demo

<input id="txtamt" maxlength="8" type=numberic value="0.00" />

Modified the code to format the input string of any length (removed the condition statements).

$("#txtamt").keyup(function (obj, evt) {
var event = (window.event) ? window.event : evt;

//ignore arrow keys so that user can move curser 
switch (event.keyCode) {
    case 37:
    case 38:
    case 39:
    case 40:
        return;
    default:
        break;
}

var str = document.getElementById("txtamt");
str.value = str.value.replace(".", "");

var val = parseFloat(str.value);
var val1 = (val / 100).toFixed(2);
str.value = val1;

});

Format number as you type when Android keyboard not showing decimal

5 Answers5