Ajax Loader
HTML 
<p>
1
<p>
2
  <input class="field" type="text" />
3
  <span class="counter">
4
    <span>0</span>
5
    Characters
6
  </span>
7
</p>
8
 
9
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
10
 
 
CSS 
p {
1
p {
2
  position: relative;
3
  margin: 60px auto;
4
  width: 60%;
5
}
6
 
7
.field {
8
  padding: 4px 10px;
9
  width: 100%;
10
  height: 30px;
11
  outline: 0;
12
  border: 1px solid whitesmoke;
13
  line-height: 30px;
14
  &:focus {
15
    outline: 0;
16
    border-color: grey;
17
  }
18
}
19
 
20
.counter {
21
  position: absolute;
22
  right: 0px;
23
  bottom: 10px;
24
  z-index: 20;
25
  font-size: 12px;
26
  span {
27
    color: green;
28
    &.warning {
29
      color: red;
30
      font-style: italic;
31
      font-size: 14px;
32
    }
33
  }
34
}
35
 
 
JavaScript 
$ () -> new characterCounter('.field', '.counter', 40)
1
$ () -> new characterCounter('.field', '.counter', 40)
2
 
3
class characterCounter
4
  constructor: (field, counter, limit) ->
5
    @$number = $(counter + ' > span')
6
    @$input = $(field)
7
 
8
    @$input.keyup( (e) =>
9
      e.preventDefault()
10
      @_count( @$input, limit )
11
    )
12
 
13
  _count: (input, limit) =>
14
    value = $(input).val()
15
    length = value.length
16
 
17
    # check if the current length is over the limit
18
    if length > limit
19
       $(input).val( value.substr(0, limit) )
20
       @$number.html(length - 1)
21
     else
22
       @$number.html(length)
23
 
24
     # check if user has less than 20 chars left
25
     if (limit - length) <= 20
26
      @$number.addClass('warning')
27
 
 

Input field character limitation using CoffeeScript

CSSDeck G+