HTML Character limiting code for html text area boxes.?

I am working on a html contact form that consists of a html page for the form and a php page to process the form.

The contact form works.

I have not designed the page so it is just a white page with the contact for on it.

I have put a html counter on the one box of the form which counts the number of characters in the box and i would now like to limit the number of characters that can be entered in to the box. I know this is possible.

I would like it so that there is a pop up box that comes up when the max number of characters is reached and then not let any more characters be entered but i do not need the pop up that is just an extra i just need a limit.

How can i do this?

This is the code for the box and the counter that i have so far (this is not the whole contact page it is just the box that i need the limit on and the counter that is with it:

<tr>

<td valign="top">

<label for="comments">Message *</label>

</td>

<td valign="top">

<!-- Created by Barrett at RRPowered.com -->

<!-- File name contcar.html -->

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/

1.4.4/jquery.min.js"></script>

<title>Contact Form</title>

<script type="text/javascript">

$(document).ready(function() {

$(".counter").text("Characters used: 0/100");

});

$(document).keyup(function() {

var text=$(".text_field").val();

var counter=text.length;

$(".counter").text("Characters used: "+counter+"/1000");

});

</script>

<style type="text/css">

body{

margin:10.5px;

}

.counter{

font-weight:normal;

color:black;

}

.text_field{

border:solid grey1px;

width:300px;

height:100px;

}

</style>

</head>

<body>

<h1></h1>

<textarea class="text_field"></textarea>

<div class="counter"></div>

</body>

</html>

</td>

Thanks for your help...

Update:

I have but in the max length tag that you said for the text area as so:

<textarea class="text_field"></textarea>

<div class="counter"></div>

<textarea maxlength="10"></textarea>

it still allows more than 10 characters to it.

the text area is called text_field as stated in the coding...

What do i do?

Thanks

Update 2:

were in the long script above do i put the max length?

3 Answers

Relevance
  • 9 years ago

    EASY!! (if i know exactly what your saying)

    if it is a textarea (i think it is)

    code:

    <textarea maxlength="type the number of characters limit"></textarea>

    if it is a input text tag, then:

    code:

    <input type="text" or "password" maxlength="type the number of characters limit">

    Hope this helped!

    • Login to reply the answers
  • David
    Lv 6
    9 years ago

    The maxlength property works -- http://jsfiddle.net/YCHJD/

    • Login to reply the answers
  • Anonymous
    9 years ago

    huh

    • Login to reply the answers
Still have questions? Get your answers by asking now.