A Pen by DerZyklop.

index.html

<input maxlength="5" type="text" name="nix" placeholder="Schreib..." value="">

input-with-maxlength.markdown

input with maxlength

Forked from DerZyklop's Pen cqkbn.

A Pen by DerZyklop on CodePen.

License.

script.coffee

$('input[maxlength]').on 'keydown', ->

  if !$(this).parent().hasClass('maxlengthwrap')
    $(this).wrap('<div class="maxlengthwrap"></div>').focus()

  maxlength = parseInt($(this).attr('maxlength'))
  currlength = $(this).val().length

  if maxlength == currlength
    $(this).on 'keyup', ->

      currlength = $(this).val().length

      if maxlength == currlength && !$(this).parent().find('.overlay').length

        # set overlay
        $(this).after('<div class="overlay">Max. '+maxlength+' Zeichen</div>')

        overlayTimeout =
        setOverlayTimeout = =>
          overlayTimeout = setTimeout =>
            $(this).parent().find('.overlay').fadeOut -> $(this).remove()
          , 1000

        # remove it a moment later
        setOverlayTimeout()
        # show a little longer if user keeps trying
        $(this).on 'keydown', ->
          clearTimeout overlayTimeout
          setOverlayTimeout()

  else
    $(this).off('keyup')

style.sass

input
  box-sizing: border-box /* css3 rec */
  -moz-box-sizing: border-box /* ff2 */
  -ms-box-sizing: border-box /* ie8 */
  -webkit-box-sizing: border-box /* safari3 */
  -khtml-box-sizing: border-box /* konqueror */

  display: block
  width: 100%

.maxlengthwrap 
  position: relative
  .overlay 
    position: absolute
    line-height: inherit
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: rgba(200,30,0,1)
    color: #fff

    /* untouchable */
    -moz-user-select: none
    -khtml-user-select: none
    -webkit-user-select: none

    /* IE 10 */
    -ms-user-select: none
    user-select: none

/* Remove this */
body 
  background: #eee
  padding: 5em

input,
.maxlengthwrap .overlay
  font-family: monospace
  border-radius: 4px
  border: 1px solid #ccc
  padding: 1em
  font-size: 1.4em
  line-height: 1em