How to show max words can be entered in text-area in PHP?

Question

I am working on one PHP form where i am putting a text-area field. Maximum 500 words can be inputted into the text-area field. I am displaying that value with label.

Here what i want to do is while the user types into the text-area field the total entered words should get subtracted from max words and that value should appear live.

For example if i have entered the text "I" than the value of max words should get changed to 499.

So how can i execute it.

[What have you tried?](http://www.whathaveyoutried.com/) See [ask advice](http://stackoverflow.com/questions/ask-advice), please. — John Conde, Mar 22 '13 at 13:33
500 times _"superfragilisticexpialidocious"_, or do you mean letters? — Wrikken, Mar 22 '13 at 13:34
I would suggest using JavaScript instead of sending `textarea` content each time to php just to count words — Voitcus, Mar 22 '13 at 13:34

George Reith · Answer 1 · 2013-03-22T14:35:23.340

2

You don't need ajax to do this. Just use a script on the page for far less overhead, for example:

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/

This doesn't take into account the complexities of language however and assumes that any space denotes a new word. If you want it to do those things you will have to look into using regex.

For a max character version see: http://jsfiddle.net/georeith/z2KfV/4/

edited Mar 22 '13 at 14:35

answered Mar 22 '13 at 13:46

George Reith

13,132
18
79
148

He wants words. Not letters. – buschtoens Mar 22 '13 at 13:50
@silvinci Just realised and updated – George Reith Mar 22 '13 at 14:00
Please use `string.match(/\w+/g).length`, as repeatead whitespaces would break your algorithm. Also, don't permit users typing as this makes a terrible UX. Just permit the submitting. – buschtoens Mar 23 '13 at 03:15
@silvinci That was mentioned in my answer, the rest is up to the OP to play with and discover. – George Reith Mar 23 '13 at 07:31
Sorry, overread that. Still `w+` is faster and works (at least) as well as the `.split(" ")` solution. Can you change that for the Googlers who come here? kthxbye – buschtoens Mar 23 '13 at 07:40

thecodedeveloper.com · Accepted Answer · 2013-03-22T13:55:26.157

1

Html Code

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

Jquery code

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

Working example http://jsfiddle.net/vikastyagi87/xqyWV/255/

edited Mar 22 '13 at 13:55

answered Mar 22 '13 at 13:40

thecodedeveloper.com

3,220
5
36
67

He wants words. Not letters. – buschtoens Mar 22 '13 at 13:41

score 1 · Answer 3 · answered Mar 22 '13 at 13:46

1

Working example here

$(function() {
    $("textarea").keypress(function() {
        total_words = this.value.split(/[\s\.\?]+/).length;     
        $("p").html(500 - total_words); 
    });
});

answered Mar 22 '13 at 13:46

Itsmeromka

3,621
9
46
79

score 1 · Answer 4 · answered Mar 22 '13 at 13:49

Plese try this :)

<?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>

score 0 · Answer 5 · answered Mar 22 '13 at 13:35

0

You should do this in Javascript. Count the number of space into your textarea (one space = on word), using regular expression. And you display the substraction: maxWords-words

answered Mar 22 '13 at 13:35

0x1gene

3,349
4
29
48

score 0 · Answer 6 · edited May 23 '17 at 10:25

In order to update an element on the screen each time the user types a letter, you'll have to use a combination of Javascript and HTML DOM.

JQuery simplifies it a bit: http://api.jquery.com/text/

You would need to capture the typing into the textarea with a Javascript event, which is actually a little more complicated.

Look at this thread for some information: Textarea onchange detection

score 0 · Answer 7 · answered Mar 22 '13 at 13:44

To get the number of words of a string use this:

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

Or as a one liner: "lorem ipsum".match(/\w+/g).length;

You need to add this check to the onKeyup and onChange event of the textarea.

How to show max words can be entered in text-area in PHP?

7 Answers7