1

Как можно получить событие input чтобы остановить ввод e.preventDefault()? Или есть какие-то другие способы реализовать подобное?

var maxTotal = 150,
  inputs = [].slice.call(document.getElementsByTagName('input')),
  getTotal = function() {
    var sum = 0;
    inputs.forEach(function(input) {
      sum += parseInt(input.value, 10);
    });
    return sum;
  },
  maxReached = function(e) {
    var sum = getTotal(),
      target;
    if (sum > maxTotal) {
      target = e.target;
      target.value = target.value - (sum - maxTotal);
      // next line is just for demonstrational purposes
      document.getElementById('total').innerHTML = getTotal();
      e.preventDefault();
      return false;
    }
    // next line is just for demonstrational purposes
    document.getElementById('total').innerHTML = getTotal();
    return true;
  };

inputs.forEach(function(input) {
  input.addEventListener('input', maxReached);
});
<input type="range" min="0" max="100" value="0" />
<input type="range" min="0" max="100" value="0" />
<input type="range" min="0" max="100" value="0" />

<div>total: <strong id="total">0</strong>/150</div>

http://jsfiddle.net/EL4tf/

2
  • что мешает перенести имеющийся код в ангуляр?
    – Grundy
    7 сен 2016 в 17:36
  • @Grundy, это достаточно красиво ангулярными методами делается :)
    – Qwertiy
    7 сен 2016 в 17:39

1 ответ 1

1

Можно сделать директиву, которая будет делать вложенные элементы и контролировать сумму. А можно и по-другому: просто установить ограничение для ng-model:

angular.module('app', [])

.controller('Ctrl', function ($scope) {
  $scope.a = $scope.b = $scope.c = 0;
  $scope.lim = 150;
  
  ($scope.update = function () {
    $scope.sum = $scope.a + $scope.b + $scope.c;
  })();
})

.directive('mySumLimit', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, el, attrs, ngModel) {
      var old = scope.$eval(attrs.ngModel);
      var lim = scope.$eval(attrs.mySumLimit);

      ngModel.$parsers.unshift(function (val) {
        val = +val;
        
        if (val > lim + old) {
          ngModel.$setViewValue(val = lim + old);
          ngModel.$render();
        }
        
        return val;
      });
      
      scope.$on('destroy', scope.$watch(attrs.mySumLimit, function (val) {
        lim = val;
      }));
      
      scope.$on('destroy', scope.$watch(function () { return ngModel.$modelValue }, function (val) {
        old = val;
      }));
    }
  };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">
  <input type="range" min="0" max="100" ng-model="a" my-sum-limit="lim-sum" ng-change="update()" />
  <input type="range" min="0" max="100" ng-model="b" my-sum-limit="lim-sum" ng-change="update()" />
  <input type="range" min="0" max="100" ng-model="c" my-sum-limit="lim-sum" ng-change="update()" />

  <div>total: <strong id="total">{{sum}}</strong>/{{lim}}</div>

2
  • Замечательно, спасибо! Только только $scope.a, $scope.b, $scope.c заменить на один объект, чтобы не было зависимости от количества input'ов.
    – Sasay
    8 сен 2016 в 9:00
  • @Sasay, просто использовать массив и ng-repeat. На приведённую директиву это никак не влияет. Если возникает проблема с биндингами инпутов, задай отдельный вопрос и напиши мне ссылку в комментарии - отвечу.
    – Qwertiy
    8 сен 2016 в 9:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.