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 回答