-1

テキストエリアフィールドを配置する1つのPHPフォームに取り組んでいます。テキストエリアフィールドには最大500語を入力できます。その値をラベル付きで表示しています。

ここで私がやりたいのは、ユーザーがテキスト領域フィールドに入力している間、入力された単語の合計が最大単語から差し引かれ、その値がライブで表示されるはずです。

たとえば、テキスト「I」を入力した場合、最大単語数の値は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

Pleseはこれを試してください:) 

<?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 に答える
1

作業例はこちら

$(function() {
    $("textarea").keypress(function() {
        total_words = this.value.split(/[\s\.\?]+/).length;     
        $("p").html(500 - total_words); 
    });
});
于 2013-03-22T13:46:26.940 に答える
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;

このチェックをテキストエリアの onKeyup および onChange イベントに追加する必要があります。

于 2013-03-22T13:44:09.043 に答える
0

これは Javascript で行う必要があります。正規表現を使用して、テキストエリア内のスペースの数を数えます (1 つのスペース = 単語上)。そして、減算を表示します: maxWords-words

于 2013-03-22T13:35:32.293 に答える
0

ユーザーが文字を入力するたびに画面上の要素を更新するには、Javascript と HTML DOM を組み合わせて使用​​する必要があります。

JQuery はそれを少し単純化します: http://api.jquery.com/text/

Javascript イベントを使用してテキストエリアへの入力をキャプチャする必要がありますが、これは実際にはもう少し複雑です。

いくつかの情報については、このスレッドを見てください: Textarea onchange detection

于 2013-03-22T13:38:27.480 に答える