Question

如何将短信限制为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>

Answer 1

要限制使用的字母数，请尝试以下方法：

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/

Answer 2

所以，这使用正则表达式来获得单词边界。改变正则表达式以改变它所认为的“单词”。在按键上，单词计数会根据情况更新并设置文本。

$(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});
});

Answer 3

我同意一些评论者的观点，限制字符可能更有用。但是，根据您定义“单词”的方式，您绝对可以统计单词：

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+/)，它应该有用。

Answer 4

试试这个...... http://www.jamesfairhurst.co.uk/posts/view/jquery_word_character_counter

Answer 5

试试这个：我在这里使用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>

用户输入消息时显示字数，并将字长限制为300字

5 个答案: