Home / Questions / 98636
Accepted
zerokira
Asked: 2020-08-31 11:08:51 +0800 CST 2020-08-31 11:08:51 +0800 CST

Replace function problem

  • 772

I have the following code (an angularjs directive), the problem is that when I am writing any number from my phone, the cursor jumps after the third number entered, also after the sixth number entered, that is, after each 3 numbers makes a jump, I can't find a suitable solution, thank you very much !! :) This is my problem:

angular.module('search').directive('inputCurrency', function($filter) {
    'use strict';

    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) {
                return;
            }

            ctrl.$formatters.unshift(function() {
                if(ctrl.$modelValue != '')
                    return $filter('number')(ctrl.$modelValue);
                else
                    return '';
            });

            ctrl.$parsers.unshift(function(viewValue) {
                var plainNumber = viewValue.replace(/[\,\.]/g, ''),
                    b = $filter('number')(plainNumber);

                elem.val(b);

                return plainNumber;
            });
        }
    };
});
javascript

1 Answers

  1. Best Answer

    This is caused by a bug in smartphone browsers, it seems to happen in both Firefox and Chrome. The solution is ugly because it's merely a patch, but it works (I'm not sure why the is needed setTimeoutbut it doesn't work without it, it seems to be because the input render is asynchronous):

    angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.numero = "4;"

}).directive('inputCurrency', function($filter) {
    'use strict';

    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {

            function setCaretPosition(elem, caretPos) {
              if (elem !== null && elem.activeElement) {

                if (elem.createTextRange) {
                  var range = elem.createTextRange();
                  range.move('character', caretPos);
                  range.select();
                } else {
                  if (elem.setSelectionRange) {
                    elem.focus();
                    elem.setSelectionRange(caretPos, caretPos);
                  } else {
                    elem.focus();
                  }
                }
              }
            }


            if (!ctrl) {
                return;
            }

            ctrl.$formatters.unshift(function() {
                if(ctrl.$modelValue != '')
                    return $filter('number')(ctrl.$modelValue);
                else
                    return '';
            });

            ctrl.$parsers.unshift(function(viewValue) {
                var plainNumber = viewValue.replace(/[\,\.]/g, ''),
                    b = $filter('number')(plainNumber);

                elem.val(b);
                setTimeout(()=>setCaretPosition(elem.find(':focus'),b.length))

                return plainNumber;
            });
        }
    };
});

    you can try it here

    • 2