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

来源：互联网发布：战略管理书籍推荐知乎编辑：程序博客网时间：2024/06/05 07:16

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 listenerfunction 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 listenerfunction 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  }}());

0 0