A Pen by DerZyklop.

cqkbn.markdown

cqkbn

A Pen by DerZyklop on CodePen.

License.

index.html

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

script.coffee

$('.maxlength').on 'keydown', ->

  maxlength = parseInt($(this).attr('maxlength'))

  if maxlength == $(this).val().length
    $(this).on 'keyup', ->
      if maxlength == $(this).val().length && !$('.maxlengthwrap .overlay').length
    
        # set overlay
        $(this)
          .wrap('<div class="maxlengthwrap"></div>').focus()
          .after('<div class="overlay">Max. '+maxlength+' Zeichen</div>')
    
        # remove it a moment later
        overlayTimeout = setTimeout ->
          $('.maxlengthwrap .overlay').fadeOut ->
            $(this).remove()
        , 1000
    
        # show a little longer if user keeps trying
        $(this).on 'keydown', =>
          clearTimeout overlayTimeout
          overlayTimeout = setTimeout ->
            $('.maxlengthwrap .overlay').fadeOut ->
              $(this).remove()
          , 1000

  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(0,0,0,0.8)
    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

body,
input
  font-family: monospace

input
  border-radius: 4px
  border: 1px solid #ccc
  padding: 1em
  font-size: 1.4em
  line-height: 1em

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