CODEWITHSUNDEEP
javascriptangularjsinput
Mark
Mark

Reputation: 209

Limit numbers before and after decimal point on input number

How to limit numbers for before and after the decimal point, something like 123.123 , so it can have max 3 numbers before . and max 3 numbers after .

   <div class="form-group">
  <input type="number" class="form-control" name="ta" id="ta" placeholder="ta" ng-model="ta.kol" ng-maxlength="15"/>
  <p ng-show="taForm.kol.$error.maxlength" class="help-block">Max 15 symbols !</p>
   </div>

Upvotes: 2

Views: 13813

Answers (5)

dumbelovic
dumbelovic

Reputation: 16

After hours of work, I create java-script function which work on keypress event. Number can be 8 characters before decimal separator and 2 character after decimal separator.

https://codepen.io/dumbelovic/pen/bvdXXq

function BeforeAfter(e, obj) {
sepDec = "."
var keycode;
var fieldval = obj.value;

if (window.event) keycode = window.event.keyCode;
else if (e) { keycode = e.which; }
else { return true; }

// denided first charatcter to be zero
if (fieldval == "" && keycode == 48)
    return false;

// denided first character to be decimal point
if (fieldval == "" && (keycode == 44 || keycode == 46))
    return false;

// enter first decimal point, 
// but every next try to eneter decimal point return false
if (fieldval != "" && ((keycode == 44 || keycode == 46))) {
    if (fieldval.indexOf(sepDec) < 0) {
        var newValue = fieldval + sepDec;
        $(obj).val(newValue);
    }
    return false;
}



var splitfield = fieldval.split(sepDec);

var beforeDecimalPoint;
var afterDecimalPoint;

if (splitfield.length == 1) {
    beforeDecimalPoint = splitfield[0];
    afterDecimalPoint = "";
}
else if (splitfield.length == 2) {
    beforeDecimalPoint = splitfield[0];
    afterDecimalPoint = splitfield[1];
}

if (beforeDecimalPoint.length == 8 && keycode != 8 && keycode != 0) {
    if (obj.selectionStart >= 0 && obj.selectionStart <= 8)
        return false;
}

if (afterDecimalPoint.length == 2 && keycode != 8 && keycode != 0) {
    if (obj.selectionStart >= beforeDecimalPoint.length + 1 && obj.selectionStart <= beforeDecimalPoint.length + 1 + 2)
        return false;
}


return true;
}

Upvotes: -1

Arizona2014
Arizona2014

Reputation: 1347

For the fraction its pretty easy as you can use Angular number filter. As for the number before the digit you should create a filter like this :

app.filter('beforeDigit', function ($filter) {
   return function (input) {
    if (input>1000) 
       return (input % 1000)
    elseif(input<1000)
       return input; 
   };
});

So in the end you will end up with something like this :

{{val | filter:{number:3}, filter:beforeDigit }}

Upvotes: 0

Michelangelo
Michelangelo

Reputation: 5948

You can use ng-pattern with a regex:

<input ng-pattern="/^[0-9]{1,3}(\.\d{0,3})?/" />

docs: https://docs.angularjs.org/api/ng/directive/ngPattern

Upvotes: 1

abhinsit
abhinsit

Reputation: 3272

You can add a onchange event on the input field and call a function that validates the current input value using regex and communicate same to the user.

Regex : ^[0-9]{0,3}.?[0-9]{0,3}$

JS Code to validate:

function validateNumberInput(inputNumber){
     return number.search(/^[0-9]{0,3}.?[0-9]{0,3}$/) == 0 ? true : false;
}

Also you can write a directive in angular that can handle the same.

Upvotes: 1

Tonny
Tonny

Reputation: 109

This can be solved with a simple piece of javascript if you just add an Event Listener to the input and then split the input on the decimal point you can then check the length of both parts and act accordingly.

https://jsfiddle.net/pk07net6/

function checkNumbers()
{
    console.log(this.value);
  var numbers = this.value.split('.');
  var preDecimal = numbers[0];
  var postDecimal = numbers[1];

  if (preDecimal.length>3 || postDecimal.length>3)
  {
        alert("Max 3 numbers before and after the decimal point.")
    this.select();
  } 
}

//ADD LISTENER TO INPUT
var input = document.getElementById("numberInput");
console.log(input);
input.addEventListener("change", checkNumbers)

Upvotes: 1

Related Questions