Geek Answers Handbook

Html placeholder text in text area

On one of my sites, I created a form that collects a name, email address, and description of their idea.

I limited the description characters to 500 characters, since I don’t want to read a ton, and I understood how the text appears in the text box before the user enters what they want.

Currently, the user must delete the "Description of your idea", but I want to add a placeholder class, where he removes what I wrote in the text box when they click on the text box

I looked at several sites and could not figure out how to use it. I put it in my code, but usually the class just appeared as text inside my text box.

Any help on using this class would be greatly appreciated.

Here is what I wrote

Inside header

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>


<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);" 
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
+5
2

http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html , , .

, , ( ).

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //  Focus auto-focus fields
        $('.auto-focus:first').focus();

        //  Initialize auto-hint fields
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
            if($(this).val() == $(this).attr('title')){
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
            if($(this).val() == '' && $(this).attr('title') != ''){
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
            if($(this).attr('title') == ''){ return; }
            if($(this).val() == ''){ $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });
    });
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>

, , .

+7

HTML5 , "placeholders", - .

, , placeholder , :

<input type='text' name='name' placeholder='Enter your name'>

, , , Safari Chrome, . , .

, , , .

placeholder Javascript, . Javascript placeholder, .

. , , placeholder: http://diveintohtml5.ep.io/detect.html

(, , Modernizr)

Javascript . , , JQuery , :

, , Google , html5 placeholder fallback - .

, .

+27

More articles:


All Articles