Strange .replace() behaviour in Chrome browser

Question

<div>
    <input type="text" class="allownumericwithdecimal"/>saadad
</div>

$(".allownumericwithdecimal").live("keypress keyup ", function (event) {
    $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
    var text = $(this).val();
    if (!((event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46 || event.which == 110 || event.which == 0)) {
        var text = $(this).val();
        if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.'), text.indexOf('.').length).length > 2)) {
            //event.preventDefault();
        }
    }
    var text = $(this).val();
    if ((event.which >= 48 && event.which <= 57) && (text.indexOf('.') != -1)) {
        if ((text.substring(text.indexOf('.'), text.indexOf('.').length).length) > 2) {
            //event.preventDefault();
        }
        if (event.which == 190) {
            //event.preventDefault();
        }
    }
    if (text.indexOf('.') != -1 && event.which == 190) {
        if (text.match("^[0-9]+(\.[0-9]{0,2})?$")) {} else {
            $(this).val('');
        }
    }
    if (text.indexOf('.') == -1 && text.length > 7 && (event.which != 190 && event.which != 8 && event.which != 46 && event.which != 110 && event.which != 0)) {
        event.preventDefault();
    }
});

http://jsfiddle.net/Lx9h2smh/

The problem is If I type a value in textBox say 3434 and now I want to make it 35434 by putting cursor after 3 and pressing 5, it works fine in Firefox and IE but in chrome the 5 get added after value and it becomes 34345.

The culprit line is one which replace non numeric characters.

How to handle this issue??

Answer 1

Try this code, it runs. jsFiddle

I just do a test

if ( /[^0-9\.]/g.test($(this).val()) ) {
    $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
}

Explain

You just make sure that the user enter the value of what you want. You replace if the entered value is not an integer. Your regex mean: "Those which are not integer or dot (.), replace them with an empty value". That why You need to make this test. Therefore, if the user enters the value you want, it doesn't do the action replace and it doesn't pass to the test.

Answer 2

$(".allownumericwithdecimal").live("keypress keyup ",function (event) {

    var caretP= $(this).getCursorPosition();
    $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
	var text = $(this).val();        
   
	if (!((event.which >= 48 && event.which <= 57) || event.which ==8 || event.which ==46 || event.which ==110 || event.which ==0) )
	{
		var text = $(this).val();
		if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.'), text.indexOf('.').length).length > 2)) {
			//event.preventDefault();
		}       
	} 
	var text = $(this).val(); 
	if((event.which >= 48 && event.which <= 57) &&  (text.indexOf('.') != -1))
	{	
		if((text.substring(text.indexOf('.'), text.indexOf('.').length).length)>2)
		{
			//event.preventDefault();
		}
		if(event.which==190)
		{
			//event.preventDefault();
		}
	}
	if(text.indexOf('.') != -1 && event.which==190 )
	{	
		if(text.match("^[0-9]+(\.[0-9]{0,2})?$")){
		}
		else{
			$(this).val('') ;
		}
	}
	 if(text.indexOf('.') == -1 && text.length>7 && (event.which!=190 && event.which !=8 && event.which !=46 && event.which !=110 && event.which !=0)){
		 event.preventDefault();
	 }
    
    $(this).selectRange(caretP,caretP);
    
});




(function($) {
    
    $.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};
    
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
    <input type="text" class="allownumericwithdecimal"/>saadad
</div>