2012-04-20 38 views
0

我有一個腳本來計算填充字段的數量。很棒。但是我發現這個腳本只計算沒有輸入提示的字段。有什麼解決辦法嗎?與輸入提示計數填充字段衝突。任何工作?

http://jsbin.com/oguzaj/4

腳本來計數字段:

$(document).ready(function() { 
    (function ($) { 

     $('#form_register').on('keyup change', function() { 
      var number = 0; 
      $(this).find('input, textarea').each(function() { 
       if (this.value !== '') { 
        $('.input_count').val(number++); 
       } 
      }); 
     }); 

    })(jQuery); 

}); 

SCRIPT輸入提示:

(function ($) { 
    $.fn.hint = function (blurClass) { 
     if (!blurClass) { 
      blurClass = 'blur'; 
     } 
     return this.each(function() { 
      var $input = $(this), 
       title = $input.attr('title'), 
       $form = $(this.form), 
       $win = $(window); 

      function remove() { 
       if ($input.val() === title && $input.hasClass(blurClass)) { 
        $input.val('').removeClass(blurClass); 
       } 
      } 
      if (title) { 
       $input.blur(function() { 
        if (this.value === '') { 
         $input.val(title).addClass(blurClass); 
        } 
       }).focus(remove).blur(); 
       $form.submit(remove); 
       $win.unload(remove); 
      } 
     }); 
    }; 
})(jQuery); 

$(function() { 
    $('input[title!=""]').hint(); 
    $('textarea[title!=""]').hint(); 
}); 
+1

HTML5瀏覽器不需要JavaScript來做到這一點。 HTML [placeholder](https://developer.mozilla.org/en/HTML/Element/Input#attr-placeholder)屬性 – epascarello 2012-04-20 13:42:08

+0

計數字段的另一種方法是:var count = $('#form_register')。find('輸入,textarea')。filter(「[value!='']」);' – user887675 2012-04-20 13:54:03

回答

1
$(document).ready(function() { 
     $('#form_register').on('keyup change', function() { 
      var number = 0; 
      $(this).find('input, textarea').each(function() { 
       if ($(this).val() && !$(this).hasClass('blur')) { 
        $('.input_count').val(number++); 
       } 
      }); 
     }); 

}); 

編輯: 如果你有一個按鈕,填寫一個字段,你需要添加這個t按鈕。

$(buttonSelector).on('click', function() { 
    var number = 0; 
    $('#form_register').find('input, textarea').each(function() { 
     if ($(this).val() && !$(this).hasClass('blur')) { 
      $('.input_count').val(number++); 
     } 
    }); 
}); 
+0

我試過了,它不起作用。仍然忽略提示字段。 – Erik 2012-04-20 13:57:27

+0

http://jsbin.com/oguzaj/4 – Erik 2012-04-20 14:03:25

+0

這是一個鏈接到代碼:http://jsbin.com/oguzaj/4/edit#javascript,html,live – Erik 2012-04-20 14:04:15