Input only with correct numeric

Question

i wanted to ask how i can combine my regex with the if( ( !regex.test( sybol.... condition, if there is a possibility, and also, how I can shorten my code? without loosing good code view. Also, dash can be only in first place and only one in input, and the same with dot.

$( this ).bind( 'keypress', function( e ){

    var code = e.keyCode || e.which;
    var symbol = String.fromCharCode( code );
    var regex = /[-0-9]|[\b]/;
    var currVal = $( this ).val();
    var insideInput = currVal.indexOf( '-' );

    if( ( !regex.test( symbol ) && code != 37 && code != 39 && code != 46 ) ||
 ( code == 45 && insideInput == 0 ) || ( currVal.length != 0 && code == 45 ) ) {

        e.preventDefault();
    }

});

Then the answer will be answered, i will put all full working code in jsfiddle, because a lot of people need this type of code, but realy and fully working, i was not able to find — GomatoX, Oct 24 '12 at 08:34

Michal Klouda · Answer 1 · 2012-10-24T07:55:13.240

1

If you want digits only input, you can use following:

$('#test').on('input', function() {

    var oldVal = $(this).val();

    // remove everything but digits
    var newVal = oldVal.replace(/[^\d]/g, '');

    // put leading minus back in place (if there was one)
    if(oldVal.trim().length > 0 && oldVal.trim()[0] == '-') {
        newVal = '-' + newVal;
    }

    $(this).val(newVal);

});

See this DEMO.

If you want more, please update your question (describe what are you trying to achieve with your script).

edited Oct 24 '12 at 07:55

answered Oct 24 '12 at 07:25

Michal Klouda

14,263
7
53
77

yes, it's simmilar to mine code, but it allow to add dasheshes in any place of input, it wouldn't be corect number if i write -19-5-, so mine code allows only one dash and only in first place. :) – GomatoX Oct 24 '12 at 07:44
1

I see.. but note that your solution allows pasting text from clipboard and doesn't allow adding minus before digits already present – Michal Klouda Oct 24 '12 at 07:47
hmmm, bind on 'input' dosn't support – GomatoX Oct 24 '12 at 08:28
Damn, then I would go back to `keyup` combined with `change` (since `keyup` is not triggered e.g. when you paste from clipboard using mouse). – Michal Klouda Oct 24 '12 at 08:33
yeah, it is allowing to paste with mouse, i will look up how to solve this problem also :) – GomatoX Oct 24 '12 at 08:36
There are events as 'paste', but you need to check browser compatibility again.. Maybe see [this](http://stackoverflow.com/q/686995/944681). – Michal Klouda Oct 24 '12 at 08:38

GomatoX · Accepted Answer · 2012-10-24T12:04:08.503

So i combined Michal Klouda ideas and mines and done this function:

$('input').bind('keypress paste', function(e) {

    var currVal = $(this).val();

    var code = e.keyCode || e.which;
    var symbol = String.fromCharCode( code );
    var regex = /[0-9\-]|[\b]/;

    if( 
        !regex.test( symbol ) && code != 37 && code != 39 && code != 46 || 
        symbol == '%' ||
        currVal.length > 0 && currVal[0] == '-' && symbol == '-' ||
        currVal.length > 0 && symbol == '.' && currVal.indexOf( '.' ) > -1 ||
        currVal.length < 1 && symbol == '.' ||
        currVal.length < 2 && symbol == '.' && currVal[0] == '-' 
    ){

        e.preventDefault();
    }
});

Some explanations:

regex = /[0-9\-]|[\b]/;

Removes all non numeric, exept dash, %, backspace symbols. Why it isn't removing % symbol, i can't find. ( one more place to inprove code )

code != 37 // leaves left arrow
code != 39 // leaves right arrow
code != 46 // allows to delete code with delete button
symbol == % // prevents from percentage symbol

Other conditions allow you to write one dot and one dash symbol. Dash allowed only in first place, dot allowed in two conditions: with dash or without. With dash allowed from 3 position, without from 2 position, but only once. Also it prevents user to paste the code from clipboard.

CODE TESTED:

IE7+
FF
Chrome
Safari
Opera

Try DEMO

P.S: thanks Michal Klouda for help.

Input only with correct numeric

2 Answers2