Add 0 to the beginning of input if less than 10

[nayen]

Hi,

I have a text input field that allows only numbers, accepts 2 characters and has “00” initial value:

<input type="text" id="myinput" maxlength="2" value="00">

What I want is to add 0 to the beginning of this input field when the user input is less than 10. So, if user enters 4, the input field will display 04.

I have been trying to make this work (not sure if it is possible) with no luck. One of the code pieces I tried is as follows, which doesn’t work but may give some ideas.

$('#myinput').on('input', function() {
	var x = $(this).val();
	if (x < 10) x = '0' + x;
	$(this).val(x);
});

The above code adds the initial zero but then locks the input. I want the user to be able to continue with the second character if they want. For example, if user wants to enter 24, when the user types 2, the input field will display 02, and when the user types 4, the input field will display 24.

Thanks for any suggestions.

[Mittineague]

On “blur” instead of on “input”?

[nayen]

@Mittineague

On “blur” instead of on “input”?

Still trying to find a way for on input but if not possible, I may consider on blur too.

EDIT: In fact, blur might make more sense because the input is limited to two characters and when user types 2 and it displays 02, then user cannot continue to enter since it is already two characters.

[OzRamos]

You’re achieve an old-school calculator type effect right, where the numbers feed in right to left? This is actually waaaaaay more complicated than you would think. Here’s a demo: http://jsfiddle.net/OzRamos/s3ds8rjj/

This is the “quick” version. Because of the way fromCharCode works, you won’t be able to use the numpad. For that you have to create a {keycode: character} map.

You basically just store the entire input history and grab the last two entered, ignoring any non-numbers.

$(function(){
    // Remove this if you don't care about reseting on focus
    $('#myinput').on('focus', function(){
        $(this).data('history', '')
        $(this).val('00')
    })
    
    $('#myinput').on('keydown', function(ev){
        var $this = $(this)
        var key = String.fromCharCode(ev.keyCode)
        var history = $this.data('history')
        var output = ''
        
        // Prevent non-numbers
        if(isNaN(parseInt(key)))
            return false
            
        // Add key to the history
        history += key.toString()
        $this.data('history', history)
        
        // Add zero
        if(history.length < 2)
            output = '0' + history
        else
            output = history
            
        // Only use the last two
        $this.val(output.slice(-2))
    })
})

[nayen]

[quote=“OzRamos, post:4, topic:176868, full:true”]
You’re achieve an old-school calculator type effect right, where the numbers feed in right to left?[/quote]

Actually, the demo you gave does not work exactly the way I want. For example, you can’t use the delete or backspace keys to undo last entry. For example, user enters 12 first, then changes his mind and wants to enter 6, what I would expect is the following:

Input 1: 1 > Display: 01
Input 2: 2 > Display: 12
Input 3: Backspace > Display: 01
Input 4: 6 > Display: 06

Not being able to use backspace will create frustration for the user. You can in a way ignore that by entering 0 and then 6 but the input field feels like it doesn’t work or getting locked if you don’t know exactly how it works.

@OzRamos

This is actually waaaaaay more complicated than you would think.

I realized that after doing more research and trying more things Some things seem pretty simple at first look, but they really are not.

Thank you for the demo, I will study it, but I won’t continue seeking a way to do what I initially wanted, I will let the user enter one or two digit inputs and when the button is clicked, I will add the 0 to the beginning if the entry is one digit. Simpler and less confusing from the user side.