输入框中的限制词

Question

I have an input box named "title".

I want the user to only enter 35 words not more than that.

<input name="title" id="title" class="event-name gui-input" placeholder="Title" type="text">

<script type="text/javascript">
    /* <![CDATA[ */
    jQuery(function(){
        jQuery("#title").validate({
            expression: "if (VAL) return true; else return false;",
            message: "Please enter Title"
        });
    });
</script>

Answer 1

Use the JavaScript split method:

var content = $("input#title").val() //content is now the value of the text box
var words = content.trim().split(/\s+/); //words is an array of words, split by space
var num_words = words.length; //num_words is the number of words in the array

if(num_words>35){
    //too many words
    return false;
}

Hopefully this helps and you can adapt this code to your validation.

JSFiddle

---

One-line solution to return the number of words in the input:

var num_words = $("input#title").val().trim().split(/\s+/).length;

JSFiddle

Answer 2

I have modified the solution provided by Ben. Providing the user to know how many words are left.

Script...

 $("#title").keyup(function(){

   var content = $("#title").val(); //content is now the value of the text box
   var words = content.split(/\s+/); //words is an array of words, split by space
   var num_words = words.length; //num_words is the number of words in the array
   var max_limit=35;
    if(num_words>max_limit){
        alert("Exceeding the max limit");
        var lastIndex = content.lastIndexOf(" ");
            $("#title").val(content.substring(0, lastIndex));

       $('#remainingChars').text('Limit Exceeding');
        return false;
    }
    else 
    {
    $('#remainingChars').text(max_limit+1-num_words +" words remaining");
    }
    });

Form fields..

  <input name="title" type="text" id="title" size="100" /> 
    <div id="remainingChars">Max limit is 35 words.</div>

JsFiddle

Answer 3

You can write following logic on keyup event

35 words = 34 spaces

1. Create a counter to count number of spaces
2. Just check for (n-1) value of counter where n is Number of words.
3. Display error message in case user is going beyond that.

Answer 4

Just use max length in input field.

<input name="title" id="title" class="event-name gui-input" 
placeholder="Title" type="text"  maxlength="35">