Question

在我的应用程序中，我有很多我想要验证的表单。例如，当您为图像添加标题时，您可以键入10个字符，并在该字段旁边显示剩余的字符数。

函数工作正常，但是我想将它用于不同形式的许多输入字段，它们具有不同的类和/或id。下面是函数（我正在使用一个带有keyup，如果你点击退格键会更新剩下的字符数，因为这似乎不适用于按键）。

那么，如何将这些函数重用于具有不同类（或id）名称的输入字段？

    $('.imageTitle').keypress(function(e) {
        var value = $(this).val(),
            valueLength = value.length;
            set = 15,
            remain = parseInt(set - valueLength);

        if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
            $('.imageTitle').val((value).substring(0, valueLength - 1));
        }

        $('#titleCharsLeft').html('&nbsp; ' + remain + ' left');
    });

    $('.imageTitle').keyup(function(e) {

        var value = $(this).val(),
            valueLength = value.length;
            set = 15,
            remain = parseInt(set - valueLength);

        if (e.keyCode == 8) {
            $('.imageTitle').val((value).substring(0, valueLength - 1));
        }

        $('#titleCharsLeft').html('&nbsp; ' + remain + ' left');
    });

Answer 1

这是一个替代演示，通过使委托成为一个函数来提供一些自定义和非重复代码。如果没有实际制作插件，这是另一种方法。

http://jsfiddle.net/lucuma/effAF/2/

HTML：您会注意到我添加了一个数据长度属性来控制每个输入的长度。

<div id="titleCharsLeft"></div>

<form>
    <input type="text" class="validateThis" data-length="10" />
    <input type="text" class="validateThis" data-length="15" />
    <input type="text" class="validateThis" data-length="10" />
    <input type="text" class="validateThis" data-length="10" />
</form>

JS：我已经创建了一个在事件中调用的函数，并且更改为on。

function validateLength(el) {
    console.log('hit');
    var $this = $(el);
    var value = $this.val(),
        valueLength = value.length;
        set = parseInt($this.attr('data-length'));
        remain = parseInt(set - valueLength);

    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
        $('.imageTitle').val((value).substring(0, valueLength - 1));
    }

    $('#titleCharsLeft').html('&nbsp; ' + remain + ' left');
}

$(document).on( 'keypress','input.validateThis',function(e){
     validateLength(this);
});

$(document).on( 'keyup', 'input.validateThis',function(e){
     validateLength(this);
});

Answer 2

考虑为要验证的每个输入字段添加一个公共类，然后应用$ .delegate（），如下所示：

<强> HTML

<form>
    <input class="validateThis" />
</form>

<强>的jQuery

$(document).delegate('input.validateThis', 'keypress', function(e){
    ...
});

$(document).delegate('input.validateThis', 'keyup', function(e){
    ...
});

<强> DEMO HERE

我希望这有帮助！

重用对输入字段中的字符进行计数的函数

2 个答案: