-1

我正在处理一个 PHP 表单，我在其中放置了一个文本区域字段。文本区域字段最多可输入 500 个单词。我正在用标签显示该值。

在这里，我想要做的是，当用户在文本区域字段中输入时，应该从最大单词中减去总输入的单词，并且该值应该显示为实时。

例如，如果我输入了文本“I”，那么 max words 的值应该更改为 499。

那么我该如何执行它。

4

7 回答 7

2

您不需要 ajax 来执行此操作。只需在页面上使用脚本以减少开销，例如：

HTML：

<!-- create textarea and limit characters -->
<textarea id="input" rows="4" cols="50" maxlength="500"> 
</textarea>
<span id="output"></span>

JS：

var maxWords = 500;
var input = document.getElementById('input');
var output = document.getElementById('output');

output.innerHTML = maxWords + " words left";

input.onkeyup = function() {
    var words = input.value.split(" "); // Convert string into words
    var diff = maxWords - words.length; // Subtract words from maxWords
    if (diff < 0) { // If words < maxWords prevent user from inputting more than maxWords
        words.length = maxWords; // Remove words over limit
        input.value = words.join(" "); // Fill input
        diff = 0;
    }
    output.innerHTML = diff + " words left"; // Tell user new word count
}

http://jsfiddle.net/georeith/z2KfV/2/

然而，这并没有考虑到语言的复杂性，并假设任何空格都表示一个新词。如果你想让它做这些事情，你将不得不考虑使用正则表达式。

有关最大字符版本，请参见：http: //jsfiddle.net/georeith/z2KfV/4/

于 2013-03-22T13:46:57.843 回答
1

html代码

<textarea id="field"></textarea>
<div id="charNum">0</div>

jQuery代码

$("#field").keyup(function(){
el = $(this);
if(el.val().length >= 500){
    el.val( el.val().substr(0, 500) );
} else {
    $("#charNum").text(500-el.val().length);
}
});

工作示例 http://jsfiddle.net/vikastyagi87/xqyWV/255/

于 2013-03-22T13:40:43.137 回答
1

这里的工作示例

$(function() {
    $("textarea").keypress(function() {
        total_words = this.value.split(/[\s\.\?]+/).length;     
        $("p").html(500 - total_words); 
    });
});
于 2013-03-22T13:46:26.940 回答
1

请试试这个:) 

<?php $no_of_word = 500;?>
<script>
$(document).ready(function(){
    $('#wordcount').keyup(function(){
        var totalword = $(this).val().length;
        if(totalword > <?php echo $no_of_word;?>){
            alert('Max word exceeded');
            $(this).attr('value',$(this).val().substr(0,<?php echo $no_of_word?>));
            $('#textrem').html(0);
        }else{
            var remword = <?php echo $no_of_word;?> - totalword;
            $('#textrem').html(remword);
        }
    });
});
</script>

<label>No of word remaining</label> <span id='textrem'><?php echo $no_of_word?></span>
<textarea id='wordcount'></textarea>
于 2013-03-22T13:49:16.677 回答
0

您应该在 Javascript 中执行此操作。使用正则表达式计算文本区域中的空格数（一个空格=单词）。然后你显示减法：maxWords-words

于 2013-03-22T13:35:32.293 回答
0

为了在用户每次输入字母时更新屏幕上的元素，您必须结合使用 Javascript 和 HTML DOM。

JQuery 简化了一点：http ://api.jquery.com/text/

您需要使用 Javascript 事件来捕获输入到 textarea 中的内容，这实际上有点复杂。

查看此线程以获取一些信息：Textarea onchange detection

于 2013-03-22T13:38:27.480 回答
0

要获取字符串的单词数，请使用以下命令：

var string = "lorem ipsum dolor sit amet"
  , words = string.match(/\w+/g)  // ["lorem", "ipsum", ...]
  , numberOfWords = words.length; // 5

或作为一个班轮："lorem ipsum".match(/\w+/g).length;

您需要将此检查添加到 textarea 的 onKeyup 和 onChange 事件中。

于 2013-03-22T13:44:09.043 回答