1

以下は、ユーザーが入力ボックスに 10 文字を超えて入力できないようにし、残りの文字数の情報をユーザーに提供する私のコードです。

問題は、ユーザーが入力したもの (または複数の文字) を消去している場合、文字数が更新されないことです。

だから、私の質問は: ユーザーが入力ボックスで消去しているかどうかをどのように検出できますか?

前もって感謝します！

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

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

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

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

3 に答える 3

3

私が間違っていなければ、消去を検出するための特別なメカニズムは必要ありません$.keyup。次のコードを使用します。Twitter のように残りの文字を更新しますが、合計文字数もカウントするように変更できます。

$("input[maxlength]").each(function() {
    var $this = $(this);
    var maxLength = parseInt($this.attr('maxlength'));
    $this.attr('maxlength', null);

    var el = $("<span class=\"character-count\">" + maxLength + "</span>");
    el.insertAfter($this);

    $this.bind('keyup', function() {
        var cc = $this.val().length;

        el.text(maxLength - cc);

        if(maxLength < cc) {
            el.css('color', 'red');
        } else {
            el.css('color', null);
        }
    });
});​

働くフィドル

それはあなたが始めるべき一般化されたものです。必要に応じて変更してください。

アップデート

input貼り付け、長押し、ドラッグなどのイベントをサポートするブラウザで、イベントのサポートを追加することもできます。このような

var maxLength = 100;
var supportOnInput = 'oninput' in document.createElement('input');
$('.imageTitle').on(supportOnInput ? 'input' : 'keyup',function(){
    var cc = $(this).val().length;

        $('#titleCharsLeft').text(maxLength - cc);

        if(maxLength < cc) {
            $('#titleCharsLeft').css('color', 'red');
        } else {
            $('#titleCharsLeft').css('color', 'black');
        }
});
​

必要に応じてFiddleを変更しました。

参考：oninputまたはthis

于 2012-05-29T20:08:47.230 に答える
0

バックスペースのキーコードを使用するだけです。

バックスペースのキーコードは 50 です。

コードは次のようになります。

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

     var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 50) { //backspace keycode
              //Do something
      }
 });
于 2012-05-29T20:12:18.457 に答える
0

これはうまくいきますか？

ステートメントのいくつかの条件を変更keypressしkeydownて削除しました。if

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

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

    if (remain <= 0) {
        $('.imageTitle').val((value).substring(0, set-1))
    }

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

デモ

于 2012-05-29T20:18:14.897 に答える