Angular limit input[number] length

Question

Using the directive in How to limit input[number] cause a issue.

When in input reached max I want to mark the input(double right click on the input) and then pressing a digit to make it change the entire input don't change it, due to the directive e.preventDefault(); The selection event can be view in:

angular.element(elem).on("select", function(e) {
                console.log(e);

            });

What is the best way to fix it? The directive:

angular.module('myApp')
  .directive('limitTo', limitTo);

function limitTo() {    
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit){
                    e.preventDefault();
                } 
            });
        }
    }
};

And use:

    <input type="number" class="form-control form-control-lg"  limit-to="6" 
    ng-model="vm.details.m_inputSMS" placeholder = {{vm.configProprs.kodPlaceHolder}} name ="m_inputSMS" id="m_inputSMS"
    ng-model-options="{ updateOn: 'blur' }"required/>

tried replacing the value with the new one, not sure it is the best way. — Itsik Mauyhas, Sep 14 '17 at 10:21
Thanks, but where is the `double right click` logic in this codes? — lin, Sep 14 '17 at 10:36
There is not, I don't know how to handle selection(double right click) and inserting a new value when the limit is reached. — Itsik Mauyhas, Sep 14 '17 at 10:38
But why do you want to use `right click`. Right click is meant to be the browser context menu. Sorry, this is not my cup of tea. Good luck. — lin, Sep 14 '17 at 10:42
Hi you could use this library https://www.npmjs.com/package/numeric-formatter — Aadhil Musthaq, Nov 03 '20 at 12:56

score 0 · Answer 1 · answered Sep 14 '17 at 11:03

0

So to solve this issue I used window.getSelection().toString() and make sure the selection match the input:

if(this.value.length == limit && window.getSelection().toString() == this.value){
     //logic goes in here...
}

answered Sep 14 '17 at 11:03

Itsik Mauyhas

3,824
14
69
114

Where is the double right click behavior in this solution? – lin Sep 14 '17 at 11:12
The double click insert value into the selection string. – Itsik Mauyhas Sep 14 '17 at 11:13

score 0 · Answer 2 · answered Sep 14 '17 at 12:52

0

If you want to give limit to input field then using ng-minlength="6" ng-maxlength="6" this you can assign limit in angularjs.

<input type="number" class="form-control form-control-lg"  ng-minlength="6" ng-maxlength="6"
    ng-model="vm.details.m_inputSMS" placeholder = {{vm.configProprs.kodPlaceHolder}} 
    name ="m_inputSMS" id="m_inputSMS" ng-model-options="{ updateOn: 'blur' }"required/>

answered Sep 14 '17 at 12:52

Nikita

437
2
12

By using ng-minlength and ng-maxlength you can entered value of 6 digits only in input field. – Nikita Sep 14 '17 at 12:57
Post a fiddle for it. – Itsik Mauyhas Sep 14 '17 at 13:12

Angular limit input[number] length

2 Answers2