I am looking to put a character limit on an input box on a form. I ideally want 140 characters but can't work out how to do it.

I'm using Angular on my front end.

My code for the input section i need a text limit for new.html

<div class="form-group">
  <label>Description 140 characters</label>
  <input type="text" ng-model="postsNew.post.description" class="form-control"  </textarea> 

I tried to use another textarea way but it deleted half of my form.

Here is my full code for this section

<section class="container">
    <h1>What happened?</h1>
    <form ng-submit="postsNew.submit()">
        <div class="form-group">
            <label>Tube Line</label>
            <select ng-model="postsNew.post.line" class="form-control">
                <option ng-repeat="line in postsNew.linesList" value="{{line}}">
                    {{line}}
                </option>
            </select>
        </div>
        **
        <div class="form-group">
            <label>Description 140 characters</label>
            <input type="text" ng-model="postsNew.post.description"
                   class="form-control"  </textarea>
        </div>
        **
        <div class="form-group">
            <label>Date</label><br>
            <input id="enddatefield" type="date" ng-model="postsNew.post.date"
                   class="form-control">
        </div>
        <div class="form-group">
            <label>Time</label><br>
            <input type="time" name="name" ng-model="postsNew.post.time"
                   class="form-control">
        </div>
        <input type="submit" value="Fingers crossed..." class="btn btn-primary
     pull-right">
    </form>
</section>

I am looking to put a character limit on an input box on a form. I ideally want 140 characters but can't work out how to do it.

I'm using Angular on my front end.

My code for the input section i need a text limit for new.html

<div class="form-group">
  <label>Description 140 characters</label>
  <input type="text" ng-model="postsNew.post.description" class="form-control"  </textarea> 

I tried to use another textarea way but it deleted half of my form.

Here is my full code for this section

<section class="container">
    <h1>What happened?</h1>
    <form ng-submit="postsNew.submit()">
        <div class="form-group">
            <label>Tube Line</label>
            <select ng-model="postsNew.post.line" class="form-control">
                <option ng-repeat="line in postsNew.linesList" value="{{line}}">
                    {{line}}
                </option>
            </select>
        </div>
        **
        <div class="form-group">
            <label>Description 140 characters</label>
            <input type="text" ng-model="postsNew.post.description"
                   class="form-control"  </textarea>
        </div>
        **
        <div class="form-group">
            <label>Date</label><br>
            <input id="enddatefield" type="date" ng-model="postsNew.post.date"
                   class="form-control">
        </div>
        <div class="form-group">
            <label>Time</label><br>
            <input type="time" name="name" ng-model="postsNew.post.time"
                   class="form-control">
        </div>
        <input type="submit" value="Fingers crossed..." class="btn btn-primary
     pull-right">
    </form>
</section>

• javascript
• jquery
• html
• angularjs

4 Answers 4

With maxlength="int"

EXAMPLE:

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

Working DEMO.

You can use maxlength

<input type="text" name="max_length" maxlength="20">

<input type="text" ng-model="postsNew.post.description" class="form-control" maxlength="140" />

you can use this maxlength="140" attribute in your input field.