0

私のアプリケーションには、検証したいフォームがたくさんあります。たとえば、画像のタイトルを入力する場合、10文字を入力すると、フィールドの横に残りの文字数が表示されます。

関数は正常に機能しますが、クラスやIDが異なる、さまざまな形式の多くの入力フィールドに使用したいと思います。以下は関数です（キーを押すと機能しないように見えるため、バックスペースを押すと残りの文字数を更新するキーアップ付きの関数を使用しています）。

では、これらの関数を異なるクラス（または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 に答える