5

ショートメッセージを300語に制限し、メッセージボックスの上部に単語数を表示するにはどうすればよいですか？何かを入力しようとしても、メッセージボックスの上部の数字が減っていないようです。

Javascript：

<script type="text/javascript" language="javascript"> 
var content;
$('textarea').on('keyup', function(){
    var words = $(this).val().split(" ").length;
    $('#myWordCount').text("("+(300-words)+" words left)");
    if(words>=300){
        $(this).val(content);
        alert('no more than 300 words, please!');
    } else {    
        content = $(this).val();
    }
});
</script>

メッセージフォーム：

    <form action="read_message.php" method="post"> 
 <table class="form_table"> 
  <tr> 
    <td style="font-weight:bold;">Subject:</td> 
    <td><input style=" width:300px" name="form_subject"/></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td style="font-weight:bold;">Message:</td> 
    <td id="myWordCount">300 words left</td> 
    <td></td> 
  </tr> 
  <tr> 
    <td><input type="hidden" name="sender_id" value="<?php echo $sender_id?>"></td> 
    <td><textarea cols="50" rows="4" name="form_message"></textarea></td> 
    <td valign="bottom"><input type="submit" name="submit_message" value="send"></td> 
  </tr> 
 </table> 
</form>
4

5 に答える 5

6

使用する文字数を制限するには、次のようにしてください。

var content;
$('textarea').on('keyup', function(){
    var letters = $(this).val().length;
    $('#myLetterCount').text(301-letters+" letters left");
    // limit message
    if(letters>=301){
        $(this).val(content);
        alert('no more than 300 letters, please!');
    } else {    
        content = $(this).val();
    }
});

単語を数えるには、次を使用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var content;
    $('textarea').on('keyup', function(){
        // count words by whitespace
        var words = $(this).val().split(/\s+/).length;
        $('#myWordCount').text(301-words+" words left");
        // limit message
        if(words>=301){
            $(this).val(content);
            alert('no more than 300 words, please!');
        } else {    
            content = $(this).val();
        }
    });
});
</script>

デモ： http： //jsfiddle.net/NVSN7/6/

于 2012-06-15T04:04:15.250 に答える
1

したがって、これは正規表現を使用して単語の境界を取得します。正規表現を変更して、「単語」と見なされるものを変更します。キーを押すと、単語数が適宜更新され、テキストが設定されます。

$(function(){
  var wordcount = /\b/g;

  $('form').on({'keypress':function(event){
    var wordArray = $(this).val().match(wordcount);
   $("#wordcount").text(wordArray?event.data.max - wordArray.length /2:event.data.max);
  }},'textarea',{max:300});
});
于 2012-06-15T04:15:30.223 に答える
1

文字を制限する方が便利かもしれないというコメントに同意します。ただし、「単語」の定義方法によっては、単語を確実に数えることができます。

function countWords(str) {
    return str.split(/\s+/).length;
}

$('textarea[name="form_message"]').on('keyup', function () {
    var words = countWords($(this).val());
    $('#myWordCount').text(300 - words + ' words left');
}

代わりに文字を数えたい場合は、.split(/\s+/)上から取り出すだけでうまくいくはずです。

于 2012-06-15T04:16:55.900 に答える
0

これを試してください... http：//www.jamesfairhurst.co.uk/posts/view/jquery_word_character_counter

于 2012-06-15T04:05:02.980 に答える
-1

これを試してください：私はここでjsを使用します。

function countWord()
{
    var str = document.getElementById("myTextarea").value;
    var subStr = str.split(" ");

    if(subStr.length == 301)
    {
        document.getElementById("myTextarea").value = str.slice(0, -1);
        alert("Limit Reached!");
        return false;
    }
}

<textarea id="myTextarea" onkeypress="return countWord();" style="width:300px; height:200px;"></textarea>
于 2012-06-15T05:02:56.737 に答える