表单增强与验证——多行文本（字符计数器）

HTML

<form name="two-thirds column" action="" method="post">
                  <label for="bio">Short Bio (up to 140 characters)</label>
            <textarea name="bio" id="bio" rows="5" cols="30"></textarea>
            <span id="bio-count" class="hide"></span>
</form>
    <script src="js/utilities.js"></script>
    <script src="js/input-type.js"></script>

utilities.js

// Helper function to add an event listener
function addEvent (el, event, callback) {
  if ('addEventListener' in el) {                  // If addEventListener works
    el.addEventListener(event, callback, false);   // Use it
  } else {                                         // Otherwise
    el['e' + event + callback] = callback;         // CreateIE fallback
    el[event + callback] = function () {
      el['e' + event + callback](window.event);
    };
    el.attachEvent('on' + event, el[event + callback]);
  }
}

// Helper function to remove an event listener
function removeEvent(el, event, callback) {
  if ('removeEventListener' in el) {                      // If removeEventListener works
    el.removeEventListener(event, callback, false);       // Use it 
  } else {                                                // Otherwise
    el.detachEvent('on' + event, el[event + callback]);   // Create IE fallback
    el[event + callback] = null;
    el['e' + event + callback] = null;
  }
}

input-type.js

(function () {
  var bio      = document.getElementById('bio'),        // <textarea> element
      bioCount = document.getElementById('bio-count');  // Character count el


  addEvent(bio, 'focus', updateCounter);       // Call updateCounter() on focus
  addEvent(bio, 'input', updateCounter);       // Call updateCounter() on input


  addEvent(bio, 'blur', function () {          // On leaving the element
    if (bio.value.length <= 140) {             // If bio is not too long
      bioCount.className = 'hide';             // Hide the counter
    }
  });


  function updateCounter(e) {
    var target = e.target || e.srcElement;      // Get the target of the event
    var count = 140 - target.value.length;      // How many characters are left
    if (count < 0) {                            // If less than 0 chars free
      bioCount.className = 'error';             // Add class of error
    } else if (count <= 15) {                   // If less than 15 chars free
      bioCount.className = 'warn';              // Add class of warn
    } else {                                    // Otherwise
      bioCount.className = 'good';              // Add class of good
    }
    var charMsg = '<b>' + count + '</b>' + ' characters'; // Message to display
    bioCount.innerHTML = charMsg;               // Update the counter element
  }


}());