AngularJS prevent input on textarea when character limit is reached

Question

How can I stop an user from typing more characters into a textarea when a maximum amount of characters is reached?

Im using ng-keypress right now but I can't figure out how to prevent the input when the limit is reached. The user should not be able to enter or paste more than 1000 characters in total into that textarea.

The question is about how to stop the input, not how to Count the Input lenght, this part is already working fine for me.

Plunker link.

    $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>

Solution:

My mistake was I just had a typo somewhere but the given answer is not 100% OK. Instead of using the oldValue it is required to substring() the newValue. If you don't do that you can't paste a text that goes over the 1000 characters into the text area. Using the newValue allows you to paste and cut the text down to the Limit.

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

Does it help at all to use ng-keydown (rather than ng-keypress)? — Josh Darnell
– Josh Darnell, Commented Nov 24, 2014 at 13:57
if you still need an answer to this, check the answer in this thread, you have to write a custom directive -> stackoverflow.com/questions/17075969/… — akashrajkn
– akashrajkn, Commented Jun 15, 2015 at 12:28

Ijon Tichy · Accepted Answer · 2014-11-24 12:58:48Z

23

You should try using maxlength attribute. The code would be something like

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

edited Nov 24, 2014 at 12:58

answered Nov 24, 2014 at 12:45

Ijon Tichy

4562 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3437727 Over a year ago

This doesn't prevent the user from typing more than 1000 characters into the Input box.

Ijon Tichy Over a year ago

@Falk my bad. Here was a comment of someone, I don't know why it was deleted. I've edited my answer according to it.

Bogdan Over a year ago

I made a mistake - the maxlength is now working for text area as well so this is a correct answer

Rasalom · Accepted Answer · 2014-11-24 12:47:34Z

15

You can use 'ng-maxlength' from angular input functionality, and watch when value is invalid. https://docs.angularjs.org/api/ng/directive/input , but it won't block the possibility to input.

Also you could just set a watch for value:

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

answered Nov 24, 2014 at 12:47

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

7 Comments

user3437727 Over a year ago

I'm already doing this. The question is how to block the Input.

Rasalom Over a year ago

You want to disable the input field at all? Because the second one will block possibility to input data.

user3437727 Over a year ago

I've tried that, didn't work for me. I have an appointment right now, I'll set up a plunker when I'm back in ~2h.

user3437727 Over a year ago

Here is the Plunker link plnkr.co/edit/40xoDECCnIB650bj8N0E I want to stop the user from adding more than 1000 chars but not set the field to disabled. Just not allowing him to enter more chars but still allow him to remove and change the content.

user3437727 Over a year ago

Works, I've had a typo somewhere :/ Thank you!

|

vinesh · Accepted Answer · 2016-01-21 16:21:28Z

10

Directive way:

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

Demo in plunker

edited Jan 21, 2016 at 16:21

vinesh

4,9436 gold badges44 silver badges45 bronze badges

answered Aug 21, 2015 at 15:55

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

tryingHard Over a year ago

What about situation when i: 1) typed 123456 2) wanted to change by selecting 6 to for example7 ?

Daniel Bonnell · Accepted Answer · 2016-07-21 18:36:21Z

6

All of the answers here are overly complicated and fail to leverage the power of HTML5. All you need to do is add maxlength="1000" to your input element and this will prevent the user from typing more than 1000 characters. It will also clip any pasted input to maintain the limit. See the Docs for more details.

Note that maxlength is not the same as ng-maxlength. ng-maxlength simply checks the length of the input and sets formName.$invalid if the input exceeds the limit. You can use both on the same input or textarea element.

answered Jul 21, 2016 at 18:36

Daniel Bonnell

5,0279 gold badges52 silver badges92 bronze badges

Comments

Thom · Accepted Answer · 2017-02-03 06:11:39Z

6

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

use maxlength in your HTML . this is easy and effective

answered Feb 3, 2017 at 6:11

Thom

3231 gold badge3 silver badges13 bronze badges

Comments

Shidhartha Sankar Saikia · Accepted Answer · 2016-02-29 06:32:39Z

2

just adding the maxlength property to textarea solve the problem

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

answered Feb 29, 2016 at 6:32

Shidhartha Sankar Saikia

212 bronze badges

Comments

dbushy727 · Accepted Answer · 2016-03-24 15:03:02Z

2

Although watchers do work, they are very costly due to the nature of the digest cycle, so if you need this functionality in many places you can access the change event and monitor the length.

// 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>

answered Mar 24, 2016 at 15:03

dbushy727

1113 bronze badges

1 Comment

Luke Rice Over a year ago

I think this is the best option when only limiting the length. I've used the watch strategy for applying a regex to the input and replacing the contents with the last valid input on failure, but for this case I like a non-watch option.

Mr. Wonderful · Accepted Answer · 2016-08-31 21:40:21Z

2

Going through same problem, stumbled on this post. Below solution worked for me.

<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...">

answered Aug 31, 2016 at 21:40

Mr. Wonderful

1991 gold badge5 silver badges13 bronze badges

Comments

Mirza Kujundzic · Accepted Answer · 2016-02-12 10:24:03Z

1

You can do this to block it

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

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

answered Feb 12, 2016 at 10:24

Mirza Kujundzic

111 bronze badge

1 Comment

mirzak Over a year ago

This works. Since it has ng-maxlength set, if value is > than 10 newVal will be undefined, and than you can just set it back to oldVal.

LadyQ · Accepted Answer · 2015-08-08 07:02:30Z

0

Why angular?? when simple HTML & JavaScript can do this?

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

In HTML

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

edited Aug 8, 2015 at 7:02

answered Aug 8, 2015 at 5:43

LadyQ

92 bronze badges

1 Comment

harishr Over a year ago

Create a directive to make it more reusable

dust · Accepted Answer · 2022-10-15 12:44:56Z

0

Just do this -

<textarea ng-model="msg" maxlength="25"></textarea>

This will definitely work!

answered Oct 15, 2022 at 12:44

dust

2212 silver badges5 bronze badges

Collectives™ on Stack Overflow

AngularJS prevent input on textarea when character limit is reached

11 Answers 11

3 Comments

7 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

7 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related