regex kyeup and replace

Discussion in 'JavaScript' started by bumbar, May 9, 2014.

  1. #1
    Hello,

    I want to restrict users can not enter characters other than numbers and single dot.
    Just like price: 12.45, 100.56, 456.00

    <script type="text/javascript">
    jQuery(function($) {
    $('.price').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
    this.value = this.value.replace(/[^0-9\.]/g, '');
    }
    });
    });
    </script>
    <input type="text" class="price" value="" />

    But in my case allow enter many dots, many digits after the point.
    I have this regex, but I do not know how to apply it to the script.
    Here: \d+\.\d?{2}

    Does anyone know the decision?
    Thanks.
     
    bumbar, May 9, 2014 IP
  2. 2WDH.com

    2WDH.com Active Member

    Messages:
    143
    Likes Received:
    3
    Best Answers:
    5
    Trophy Points:
    68
    #2
    Hi.

    Since you are using jQuery it might be better for you to use the jQuery "Numeric" plugin.
     
    2WDH.com, May 10, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    you should be trapping keypress, as it's the one that actually handles processing. While I'm not 100% familiar with how the fat bloated wreck of idiocy known as jQuery would be handling that, I'm pretty sure playing with the elements value is NOT how you go about it! You have to cancel the event!

    I just recently wrote something that does exactly that... lemme gut it down to being a standalone instead of needing my lib functions...

    function numberRestrict(target) {
    	var f = function(e) {
    		e = e || window.event;
    		var
    			k = e.keyCode || e.charCode,
    			keyRestrictions = '0123456789.';
    		if ((k > 31) && (
    			(keyRestrictions.indexOf(String.fromCharCode(k)) == -1) 
    		)) {
    			e.cancelBubble = true;
    			if (e.stopPropagation) e.stopPropagation();
    			if (e.preventDefault) e.preventDefault();
    			e.returnValue = false;
    		}
    	};
    	if (target.addEventListener) e.addEventListener('keypress', f, false);
    		else target.attachEvent('onkeypress', f);
    }
    Code (markup):
    Detect if the keypress is an undesired character, if so prevent the event from continuing. Poof, now you can only type digits and period in your field... just call it:

    numberRestrict(document.getElementById('price'));

    Assuming your input has an ID, which it should since you should have a LABEL and a FOR if you have any clue how to build a form properly.

    Oh, notice I still let it pass control codes (characters below 32 decimal) since we probably don't want to disable tab, shift-tab, enter, etc, etc...

    Basically though, rather than playing with the value, prevent the user from being able to input invalid characters in the first place.

    Hope this helps.
     
    deathshadow, May 13, 2014 IP