0

ユーザーがjQueryを使用してテキスト領域内に入力できる文字数を表示する文字カウンターを実装しようとしています。コードは次のとおりです。

HTML:

<textarea id="questionTextBox"  placeholder="Enter question e.g. How do I as for a pay raise?" name="data[Qna_question][question_text]"></textarea>

<span id="noOfChar">128</span> characters remaining

Jクエリ:

jQuery(document).ready(function(){

 jQuery("#questionTextBox").keypress(function () {

   var qText = jQuery("#questionTextBox").val();

   if(qText.length <= 127) {
    jQuery("#noOfChar").html(128 - qText.length - 1);
   } else {
       jQuery("#questionTextBox").val(qText.substring(0,128));
   }

  });

});

ここにjsfiddleがありますhttp://jsfiddle.net/Cy667/

正しく動作していません。

  1. 128 文字に達すると、それ以上の値を取りません。
  2. 文字を削除すると、カウンターが増加するはずです。128 の制限に達した後、最初の数文字を削除しても増加しません。
4

2 に答える 2

1

ユーザーがキーボードで行うすべての操作をキャッチするには、3 つの jQuery キー イベントをすべて使用する必要があります。

これで問題が解決するはずです: JSFiddle

$(document).ready(function(){

    function updateCount ()
    {
        var qText = jQuery("#questionTextBox").val();

       if(qText.length < 128) {
           jQuery("#noOfChar").html(128 - qText.length);
       } else {
           jQuery("#noOfChar").html(0);
           jQuery("#questionTextBox").val(qText.substring(0,128));
       }
    }

    $("#questionTextBox").keyup(function () {
        updateCount();
    });
    $("#questionTextBox").keypress(function () {
        updateCount();
    });
    $("#questionTextBox").keydown(function () {
        updateCount();
    });
});
于 2013-08-08T09:20:55.280 に答える
0

最初の問題については、テキストエリアの maxlength 属性を使用できます

<textarea maxlength="128"></text>

2番目の問題については、機能キー（バックスペース、シフトなど）を押しても機能しないことを試したので、機能をtextareaのonchangeリスナーにバインドできます。

于 2013-08-08T09:41:50.470 に答える