3

Tengo el siguiente código (una directiva angularjs), el problema es que cuando yo estoy escribiendo desde mi teléfono una cifra cualquiera, el cursor da un salto después del tercer número ingresado, también después del sexto número ingresado, es decir, que después de cada 3 números hace un salto, no encuentro una solución adecuada, muchas gracias !! :) Este es mi problema:

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;
            });
        }
    };
});
9
  • Con salto te refieres a que le haga focus al siempre elemento input? O que en el mismo input haga un salto de linea y puedas esecribir debajo?
    – Einer
    el 30 ago. 2017 a las 19:14
  • Me refiero a que yo estoy escribiendo en mi teléfono, supongamos 1234 entonces lo que hace es convertir esa cifra en 1,234 y me coloca el cursor antes del numero 4, entonces al copiar un numero me lo va colocar entre el 3 y 4, digamos que coloco un 7 entonces queda de esta manera 12,374 me entiendes brothersito :)
    – zerokira
    el 30 ago. 2017 a las 19:17
  • Y el ejemplo que publicaste, no te funciona?
    – Einer
    el 30 ago. 2017 a las 19:34
  • si funciona, pero el problema que tengo es que me coloca el cursor donde no debe ser, se supone que debe de seguir normal y no colocarme los numeros donde no deben ser como te explique anteriormente, si coloco 123 y quiero poner otro numero digamos 1,234 me coloca el cursor en la mitad del 3 y 4, la idea es que lo coloque despues del 4 para tener algo secuencial, 12,347
    – zerokira
    el 30 ago. 2017 a las 19:47
  • que version de angular utilizas? Hice un ejemplo y si escribo en el o pego cualquier numero, el cursor se situa al final del valor correctamente.
    – Einer
    el 30 ago. 2017 a las 19:51

1 respuesta 1

2
+50

Esto es causado por un bug en los navegadores de smartphones, parece que pasa tanto en Firefox como en Chrome. La solución es fea porque es un meramente un parche, pero funciona (no tengo claro el por qué hace falta el setTimeout pero no funciona sin él, parece que es porque el render del input es asíncrono):

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;
            });
        }
    };
});

Puedes probarlo aquí

7
  • justo en este momento estaba leyendo acerca de esto y si tiene que ver con lo que dices, déjame reviso amigo y apruebo tu respuesta :)
    – zerokira
    el 4 sep. 2017 a las 16:37
  • Muchas gracias compañero, saludos. Tienes algún método por el cual pueda contactarte, te conviene.
    – zerokira
    el 4 sep. 2017 a las 19:39
  • encontré algo que no puede pasar... tengo 2 input cuando escribo en el primer <input> y luego paso al otro se devuelve al primero... Por que sucede esto? Gracias.
    – zerokira
    el 4 sep. 2017 a las 21:25
  • Arreglado, ahora sólo se realiza la acción cuando el elemento ya es el elemento activo. Si te mueves a otro elemento, no se llama a elem.focus() el 5 sep. 2017 a las 7:19
  • Si eso hice bro, te gustan los juegos online? jaja
    – zerokira
    el 5 sep. 2017 a las 12:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.