AngularJS предотвращает ввод данных в текстовое поле, когда достигается предел символов

Как я могу запретить пользователю вводить больше символов в текстовое поле, когда достигается максимальное количество символов?

Я использую ng-keypress прямо сейчас, но я не могу понять, как предотвратить ввод, когда предел достигнут. Пользователь не должен иметь возможность вводить или вставлять более 1000 символов в это текстовое поле.

Вопрос о том, как остановить ввод, а не как подсчитать длину ввода, эта часть уже работает отлично для меня.

Ссылка Plunker.

    $scope.$watch('comment.Comment.body', function (newValue, oldValue) {
        if (newValue) {
            $scope.commentLength = 1000 - newValue.length;
        }
    });
    // Tried this, nothing stops it
    $scope.updateBody = function (event) {
        event.cancel();
        event.stop();
        return false;
    };

HTML

<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    ng-keypress="updateBody($event)">
</textarea>
<p>
    {{commentLength}} remaining
</p>

Решение:

Моя ошибка заключалась в том, что у меня была только опечатка, но данный ответ не был на 100% ОК. Вместо oldValue требуется substring() newValue. Если вы этого не сделаете, вы не можете вставить текст, который превышает 1000 символов в текстовой области. Использование newValue позволяет вставлять и вырезать текст до предела.

    $scope.$watch('comment.Comment.body', function (newValue) {
        if (newValue && newValue.length > 1000) {
            $scope.comment.Comment.body = newValue.substring(0, 1000);
        }
        // Must be checked against undefined or you get problems when removing text
        if (newValue != undefined) {
            $scope.commentLength = 1000 - newValue.length;
        }
    });

ОТВЕТЫ

Ответ 1

Вы можете использовать 'ng-maxlength' из функций ввода angular и смотреть, когда значение недействительно. https://docs.angularjs.org/api/ng/directive/input, но он не будет блокировать возможность ввода.

Также вы можете просто установить часы для значения:

$scope.$watch('value', function(newVal, oldVal) {
  if(newVal.length > 10) {       
    $scope.value = oldVal;
  }
});

Ответ 2

Вы должны попробовать использовать атрибут maxlength. Код будет что-то вроде

<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    maxlength="1000">
</textarea>
<p>
    {{1000 - comment.Comment.body.length}} remaining
</p>

Ответ 3

Директива:

app.directive('myBlock', function ($parse) {
    return {
        scope: {
          validLength: '='
        },
        link: function (scope, elm, attrs) {

          elm.bind('keypress', function(e){

            // stop typing if length is equal or greater then limit
            if(elm[0].value.length >= scope.validLength){
              e.preventDefault();
              return false;
            }
          });
        }
    }   
});

Демо в plunker

Ответ 4

Все ответы здесь слишком сложны и не могут использовать возможности HTML5. Все, что вам нужно сделать, это добавить maxlength="1000" к вашему элементу ввода, и это не позволит пользователю ввести более 1000 символов. Он также скопирует любой вставленный ввод, чтобы поддерживать ограничение. Подробнее см. Документы.

Обратите внимание, что maxlength не совпадает с ng-maxlength. ng-maxlength просто проверяет длину ввода и устанавливает formName.$invalid, если вход превышает предел. Вы можете использовать оба элемента на одном элементе ввода или textarea.

Ответ 5

<input type="text" name="usrname" maxlength="10">

используйте maxlength в своем HTML. это легко и эффективно

Ответ 6

просто добавив свойство maxlength в textarea, решив проблему

<textarea maxlength="10"
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    ng-keypress="updateBody();">
</textarea>

Ответ 7

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

// controller
$scope.monitorLength = function (maxLength) {
  if ($scope.value.length > maxLength) {
    $scope.value = $scope.value.substring(0, maxLength);
  }
}

// html
<textarea ng-model="value" ng-change="monitorLength(1000)"></textarea>

Ответ 8

Вы можете сделать это, чтобы заблокировать его

    $scope.$watch('value', function(newVal, oldVal) {
        if(newVal == undefined){
            $scope.value= oldVal;
        }
    });

    <textarea ng-maxlength="10" ng-model="value" ></textarea>

Ответ 9

Пройдя через ту же проблему, наткнулся на этот пост. Ниже решение работало для меня.

<input type="text" data-ng-model="value" class="form-control" ng-pattern="/^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]$/" ng-maxlength="15" maxlength="15" placeholder="enter your text here...">

Ответ 10

Почему angular?? когда простые HTML и JavaScript могут это сделать?

   $scope.charLimit = function($event, limitNum) {
       limitField =$event.currentTarget;
       if (limitField.value.length > limitNum) {
           limitField.value = limitField.value.substring(0, limitNum);}
   };

В HTML

 <textarea onkeyup="charLimit($event,10)" placeholder="Enter text here..."></textarea>

Ответ 11

Это работает для меня в шаблоне.

<textarea
    ng-model="comment.Comment.body"
    name="comment[Comment][body]"
    placeholder="Your comment..."
    maxlength="1000">
</textarea>
<p>
    {{1000 - (comment.Comment.body.length || 1000)}} remaining
</p>