0

在我的应用程序中，我有很多要验证的表单。例如，当您输入图像的标题时，您可以输入 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');
    });
4

2 回答 2

3

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

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

HTML：您会注意到我添加了一个 data-length 属性来控制每个单独输入的长度。

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

​</p>

于 2012-06-02T17:32:32.677 回答
1

考虑为您希望验证的每个输入字段添加一个公共类，然后像这样应用 $.delegate()：

HTML

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

jQuery

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

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

在这里演示

我希望这有帮助！

于 2012-06-02T14:53:00.960 回答