【问题标题】:Conflict with counting filled fields with input hints. Any work around?与计算输入提示的填充字段冲突。有什么解决办法吗?
【发布时间】:2012-04-20 13:38:27
【问题描述】:

我有一个脚本来计算填写的字段数。效果很好。但我发现脚本只计算没有输入提示的字段。有什么解决办法吗?

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);

});

输入提示的脚本:

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

【问题讨论】:

  • HTML5 浏览器不需要 JavaScript。 HTML placeholder 属性
  • 另一种统计字段的方法:var count = $('#form_register').find('input,textarea').filter("[value!='']").length;

标签: javascript jquery forms field hints


【解决方案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++);
                }
            });
        });

});

编辑: 如果您有一个填充一个字段的按钮,则需要将其添加到按钮中。

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

【讨论】:

  • 我试过了,还是不行。仍然会忽略带有提示的字段。
  • :) 不错。 +1。也向@Erik 致敬
  • 感谢各位先生的帮助。关于这个主题的最后一个问题。我有两个通过按钮填充的输入字段。我注意到当按钮被单击或再次单击以进行取消选择时,计数不会改变。有没有办法解决这个问题? jsfiddle.net/9cr4F/9
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-17
  • 2013-04-17
  • 1970-01-01
  • 1970-01-01
  • 2013-09-11
  • 2017-12-16
相关资源
最近更新 更多