Установить позицию курсора в input с AngularJS

Мне нужно изменить положение каретки ввода, где добавляется заданное количество цифр (пример). 

app.controller('MainCtrl', function($scope, $element, $timeout, $filter) {
  //$scope.val = '12';
  $scope.$watch('val', function(newValue, oldValue) {
    if (!isNaN(newValue)) {
      if (newValue.length > 3) {
        //Set Caret Position  
      }
    }
  });
});

можно ли сделать что-то подобное пример?

Мне нужно, например :

ввод: 1234.

таким образом, позиция каретки будет 2.

новая цифра: 9

финал: 12934

спасибо заранее.

9
angularjs angularjs-scope javascript

5 ответов

Я думаю, что такие вещи лучше смотрятся в директивах. Например:

app.directive('caret', function() {

    function setCaretPosition(elem, caretPos) {
        if (elem !== null) {
            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();
            }
        }
    }

    return {
        scope: {value: '=ngModel'},
        link: function(scope, element, attrs) {
            var caret = Number(attrs.caret);
            scope.$watch('value', function(newValue, oldValue) {
                if (newValue && newValue != oldValue && !isNaN(newValue) && newValue.length > (caret + 1)) {
                    setCaretPosition(element[0], caret);
                }
            });
        }
    };
});

использование:

<input ng-model='val' caret="2" />

Я setCaretPosition функция для перекрестного позиционирования курсора браузера от этой ответ.

демо:http://plnkr.co/edit/5RSgzvyd8YOTaXPsYr8A?p=preview

25

Я думаю, что лучший подход для этого-сделать многоразовую директиву, поскольку мы имеем дело с манипуляцией DOM.

ссылка на демо:http://plnkr.co/edit/qlGi64VO1AOrNpxoKA68?p=preview

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope, $element, $timeout, $filter) {
  $scope.$watch('val', function(newValue, oldValue) {
    if (!isNaN(newValue)) {
      if (newValue.length > 3) {
      // $element.find('input')[0].selectionEnd  = 2;
      }
    }
  });
});

app.directive('setCaret', function() {

  return {
    restrict: 'A',
    link: function(scope,element,attrs) {
      var changed = false;
      element.bind('keypress', function() {
        if(element[0].selectionStart > 3 && !changed) {
          changed = true;
          element[0].selectionEnd = parseInt(attrs.position, 10);
        }
      })

    },
  }

})

вы можете видеть в прокомментированной части контроллера, мы можем иметь доступ к этому, используя $element, но поскольку это DOM, а контроллеры не для манипуляции DOM, нам нужно сделать это директивой.

1

у меня тоже была такая же проблема.

Я думал решить его, создав соответствующую директиву. Вы можете найти его здесь. Наслаждайтесь!

использование

включить директиву, объявить его caret-aware атрибут

<script src="https://cdn.rawgit.com/leodido/ng-caret-aware/master/caretaware.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myModule', ['leodido.caretAware']);
</script>
...
<div data-ng-app="app">
    <input type="text" name="myname" caret-aware="cursor"/>
</div>

тогда в области видимости у вас будет переменная cursor содержащий позицию курсора во входных данных с именем myname.

тем не менее, контроллер этой директивы предоставляет В API

  • getPosition
  • setPosition

для других примеров использования см. example каталог вышеупомянутого связанного репозитория github.

1

Я верю, что вы могли бы сделать это с помощью .setSelectionRange() на ваш вклад. Я обновил ваш пример-посмотрите, если это то, что вы хотели:http://plnkr.co/edit/bIJAPPAzkzqLIDUxVlIy?p=preview

Примечание: setSelectionRange Не поддерживается IE8 (см. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.setSelectionRange), поэтому, если вам нужно поддерживать IE

0

Я jsfiddled рабочий раствор. Таким образом, вы должны создать директиву:

app.directive('keypressdetector', function($compile){
    return {
    restrict:'AEC',
    link: function(scope, element, attrs){
        element.bind("keypress", function (event) {
            if(event.which === 13) {
                            var selectionStart = element[0].selectionStart;
              var value = element.val();
              var valueLength = value.length;
              var newValue= '';
              if (selectionStart == valueLength){
                newValue = value;
              } else {
                newValue = value.substring(selectionStart, valueLength);
              }
              var newElement = angular.element('<input type="text" value="' + newValue +'"/>')
              angular.element(document.body).append(newElement);
            }
        });
    }
  };
});

ваш контроллер был бы бесполезен в этой ситуации. Вы можете вызвать директиву следующим образом (см.: keypressdetector):

<div ng-app="myapp">
<div ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName" keypressdetector />
    <input type="submit" ng-click="login()" value="Login"/>
    <div ng-repeat="login in logins">{{ login }}</div>
</div>
</div>

см. демо : https://jsfiddle.net/Lt7aP/3468/

0