CODEWITHSUNDEEP
javascriptjquery
Thomas
Thomas

Reputation: 34218

Restrict user to enter numeric value with 2 place decimal

I've got a code which restricts the user to enter numeric value with decimal up to 2 place. The script below is working but code is not allowing users to use backspace or delete key or navigation key like (left, right, up, down). I also want users not to be able to enter 0 or more than 70 as value. So users can enter min value 1 or max 70 or 65.21 etc.

Just guide me what to change in this code.

$('.number').keypress(function (event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }

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

    if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
        event.preventDefault();
    }
});

I got a jquery based a library which works like a charm but the library requires a higher version of jquery but our company using jquery version 1.4.1 (jquery-1.4.1.min.js)

The below script and guide me on how to develop one which will work smoothly with jquery version 1.4.1.

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <!-- jQuery and Plugin References -->
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://www.decorplanit.com/plugin/autoNumeric-1.9.18.js"></script>
  <script type='text/javascript'>
    $(function($) {
      // Only allow integer values with a max of 70 (denoted by the vMax parameter)
      $('.numericOnly').autoNumeric('init', { vMax: 70, lZero: 'deny', aSep: '', mDec: 0 });    
    });  
  </script>
</head>
<body>
  <!-- Define your specific properties for your field -->
  <input type="text" class="numericOnly" >
</body>

working sample

looking for guidance.thanks

EDIT

i just update a small area like min value can not be 0 rather it should be 1.

$('.numericOnly').keyup(function (event) {
    var text = $(this).val();
    console.log(text);
    var hasToBeSet = false;
    if ( text.length === 1 && text[0] === '.' ){
        hasToBeSet = true;
        text = "";    
    }
    else if ((text.match(/\./g) || []).length === 2) {
        hasToBeSet = true;
        text = text.substring(0,text.length - 1);
    } else if (text === "70.") {
        hasToBeSet = true;
        text = "70";
    } else if (parseFloat(text) > 70) {
        hasToBeSet = true;
        text = "70";
    } else if (parseFloat(text) < 1) {
        text = "1";
        hasToBeSet = true;
    } else if (text.indexOf(".") !== -1 && text.substring(text.indexOf(".") + 1, text.length).length >= 3) {
        hasToBeSet = true;
        text = text.substring(0, text.indexOf(".")) + text.split('').splice(text.indexOf("."), 3).join('')
    }
    if (hasToBeSet) $(this).val(text);
}).keypress(function (event) {
    console.log(event.keyCode);
    if ((event.which != 46 && event.keyCode != 8 && event.keyCode != 16 && !(event.keyCode >= 37 && event.keyCode <= 40) && event.which != 0) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
        return false;
    }
});

<input type="text" class="numericOnly" onpaste="return false">

Upvotes: 2

Views: 910

Answers (2)

Michael
Michael

Reputation: 3326

This is a possible solution: http://jsfiddle.net/2dnvpn52/17/

I added two things: -onpaste return false (in order to prevent some code paste into the input) -changed the event to keyup in order to have the actual value (keypress is faster, so you aren't getting the true value of the input)

This was the logic applied:

//Checking if is more than 70 or less than 70
if (parseFloat(text) > 70) {
    text = "70";
    hasToBeSet = true;
} else if (text < 0){
    hasToBeSet = true;
    text = "0";
}
else if (text.indexOf(".") !== -1 && text.substring(text.indexOf(".") + 1, text.length).length >= 3) {
//Checking if it has a dot and then getting the part after the ., and check if it is longer than 2
    text = text.substring(0, text.indexOf(".")) + text.split('').splice(text.indexOf("."), 3).join('');
    hasToBeSet = true;
}
if ( hasToBeSet )
   $(this).val(text);

EDIT: I change the code and the jsfiddle putting the event.which on keypress event

Upvotes: 2

Hitendra Patel
Hitendra Patel

Reputation: 123

Simple way is to check number of Decimal places on each keypress. Following is stub for same,

Private Sub Text1_KeyPress(KeyAscii As Integer)
    If KeyAscii = 46 Then
        If InStr(Text1.Text, ".") > 1 Then
            KeyAscii = 0
        End If
    End If
End Sub

This will restrict user from entering two or more decimal places. Now add your logic to prevent user from entering Decimal Places at the start and end of the input string.

Upvotes: 1

Related Questions