4

JavaScript が正しく動作しない理由がわかりません。その j Query を使用し、すべてのテキスト領域タグを選択し、各テキスト領域に対して入力された文字数をカウントし、最大長に達した後はユーザーがそれ以上入力できないようにし、文字カウンターも表示することを想定しています各テキストエリアボックスの下。その機能は、残りの文字のみを表示することですが、キーを押すたびに減少せず、最大長に達しても停止しません。また、すべてのテキスト領域を選択するわけではなく、最初に見つかったものだけを選択します。

これが私のTextAreaCounter.jsです

$(document).ready(function){
var $texts = $('textarea[maxlength]');
$texts.each(function){
  $var $this = $(this),
  max = $(this).attr('maxlength'),
  textId = $(this)attr.('id'),
  $parent = $this.parent(),
  countId = textId+'-count';

$div = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this);
$input = $('<input></input>').attr({
    type:"text",
    readOnly: "readOnly",
    value: max,
    id: countId
    }).css({
      width: "25px"
      marginTop: "5px"
      marginBottom: "10px"
    }).addClass('readOnly').appendTo($div);

$this.on({
  keyup: function(){
    val = $this.val(),
    countVal = $('#'+countId).val(),
    if(val.length > max){ 
      $this.val(val.substr(0,max));
      alert('Max length exceeded: ' +max);
      return false;
    }else{
      $('#'+countId).val(max-val.length);
    }
  },
  blur: function(){
    val=$this.val();
    if(val.length > max){
      $this.val(val.substr(0,max));
      alert('Max length exceeded: ' +max);
      return false;
    }else{
      $('#'+countId).val(max-val.length);
    }
  }
});
});
});

ここのコードには表示されていないアラートをいくつか追加すると、keyup イベントで this.on セクションに到達していないことが示されました。この外部 js ファイルを、ページが作成され、テキスト領域が含まれる jsp ファイルに含めました。また、id および maxlength 属性を textarea 要素に追加します。どんな助けでもありがとう。

4

3 に答える 3

2

ああ、これができるのに、なぜ上記のコードが必要なのですか？

限定デモ http://jsfiddle.net/jnXEy/ (制限を 20 に設定しました) 自由に遊んでください。

何か見逃した場合はお知らせください。ただし、以下が役立ちます:)

長さを制限するために、いつでも長さにチェックを入れることができます。

コード

$('#myInput').keyup(function() {
    $('#charCount').text( this.value.replace(/{.*}/g, '').length );
});​

HTML

<textarea id="myInput"></textarea> <br>
Counter: <span id="charCount"></span>​
于 2012-08-07T04:49:42.257 に答える
1

あなたは通過する必要があります

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

テキストエリアの文字数を制限する

文字数を制限する簡単な方法は次のとおりです。

<textarea maxlength="50">
Enter text here
</textarea>

より多くのデータについては、

http://www.w3schools.com/html5/att_textarea_maxlength.asp

于 2012-08-07T05:09:07.527 に答える
0

コードに多くの構文エラーがあります。今すぐお試しください：

$(document).ready(function () { // bracket was missing here...
    var $texts = $('textarea[maxlength]');
    $texts.each(function () { // bracket was missing here...
        var $this = $(this), // incorrect variable declaration here...
        max = $this.attr('maxlength'),
        textId = $this.attr('id'), // incorrect method call here...
        $parent = $this.parent(),
        countId = textId + '-count',

        $div = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this),
        $input = $('<input></input>').attr({
            type: "text",
            readOnly: "readOnly",
            value: max,
            id: countId
        }).css({
            width: "25px", // missing comma here...
            marginTop: "5px", // missing comma here...
            marginBottom: "10px"
        }).addClass('readOnly').appendTo($div);

        $this.on({
            keyup: function () {
                var val = $this.val(),
                countVal = $('#' + countId).val(); // must have semicolon here...
                if (val.length > max) {
                    $this.val(val.substr(0, max));
                    alert('Max length exceeded: ' + max);
                    return false;
                } else {
                    $('#' + countId).val(max - val.length);
                }
            },
            blur: function () {
                var val = $this.val();
                if (val.length > max) {
                    $this.val(val.substr(0, max));
                    alert('Max length exceeded: ' + max);
                    return false;
                } else {
                    $('#' + countId).val(max - val.length);
                }
            }
        });
    });
});

http://jsbin.com/uzohuv/3

于 2012-08-07T05:01:32.860 に答える