Input Text Counter

Simple dynamic counter on a text input.

by Morgan Gilroy

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="panel">
  <div class="input-container">
    <label for="input1">Input 1:</label>
    <div class="notification-container">
      <span class="notification-counter">0</span>
      <span class="notification-counter-css">0</span>
      <input id="input1" name="input1" class="inputText" type="text" />
    </div>
  </div>

  <div class="input-container">
    <label for="input2">Input 2:</label>
    <div class="notification-container">
      <span class="notification-counter">0</span>
      <span class="notification-counter-css">0</span>
      <input id="input2" name="input2" class="inputText" type="text" />
    </div>
  </div>

  <div class="input-container">
    <label for="input3">Input 3:</label>
    <div class="notification-container">
      <span class="notification-counter">0</span>
      <span class="notification-counter-css">0</span>
      <input id="input3" name="input3" class="inputText" type="text" />
    </div>
  </div>

  <button id="set">Set</button>
  <button id="clear">Clear</button>

</div>

CSS

@keyframes notificationIn {
  0% {
    transform: translate(0, 5px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0px);
    opacity: 1;
  }
}

.input-container {
  margin: 20px;
}

.notification-container {
  position: relative;
}

.notification-container .notification-counter {
  position: absolute;
  right: -5px;
  top: -5px;
  background-color: rgba(0, 185, 225, 1);
  color: #fff;
  border-radius: 3px;
  padding: 3px 5px;
  font: 8px Verdana;
}

.notification-container .notification-counter-css {
  position: absolute;
  right: -5px;
  bottom: 10px;
  background-color: rgba(185, 0, 225, 1);
  color: #fff;
  border-radius: 3px;
  padding: 3px 5px;
  font: 8px Verdana;
}

.notificationIn {
  animation-name: notificationIn;
  animation-duration: 0.2s;
}

.inputText {
  height: 2.6rem;
  border-radius: 5px;
  border: 2px solid #d7dce1;
  box-shadow: none;
  font-size: 1rem;
  font-weight: normal;
  padding-left: 12px;
  outline: medium none;
  /* display: block; */
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 1rem;
  font-family: inherit;
  color: #141e28;
  background-color: white;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
}

.inputText:focus {
  border: 2px solid #00b9e1;
}

label {
  color: #878c9b;
  font-size: 0.688rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.6;
  display: block;
  margin: 0;
}

button {
  height: 2.6rem;
  font-size: 0.938rem;
  font-weight: 400;
  border-radius: 5px;
  -webkit-appearance: none;
  display: inline-block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: 0.85em 1em;
  background-color: #7dc364;
  color: white;
}

button:hover {
  background-color: #5daa42;
}

.panel {
  background-color: white;
  padding: 20px;
  border: 1px solid #d7dce1;
  border-radius: 4px;
  margin-bottom:...

JavaScript

var updateFunk = function() {
  var len = $(this).val().length;
  var counter = $(this).siblings('.notification-counter');

  //animate with jQuery
  if (counter.text() != len) {
    counter
      .stop(true, true)
      .css({
        opacity: 0,
        top: '-10px'
      })
      .text(len)
      .animate({
        opacity: 1,
        top: "-5px"
      }, 200);
  }

  //animate with CSS
  var counterCss = $(this).siblings('.notification-counter-css');

  if (counterCss.text() != len) {
    counterCss.removeClass('notificationIn').width(); //.width() is required to trigger a reflow, without it the animation doesnt restart.
    counterCss.addClass('notificationIn').text(len);
  }
};

$('input').keyup(updateFunk);
$('input').change(updateFunk);

$('#set').click(function() {
  $('.inputText').val("Testing").keyup();
});

$('#clear').click(function() {
  $('.inputText').val("").keyup();
});

$('input').change();