jquery - Dont Consider Example text as value of textbox

Question

I want to show example text in Email text-box so I used code:-

<input name="login[username]" 
       onfocus="if (this.value == 'john@gmail.com') {this.value = ''; }" 
       onblur="if (this.value == ''){this.value = 'john@gmail.com'; }" 
       value="john@gmail.com"  
       id="email" 
       type="text" 
       class="input-text required-entry" 
       title="<?php echo $this->__('Email Address') ?>" />

But when I clicked on submit button without entering value then it considers example text means "john@gmail.com" as login id but it have to show error "required field.". Please help me.

Answer 1

你可以使用 placeholder="john@gmail.com"

<input name="login[username]" placeholder"john@gmail.com" id="email" type="text" class="input-text required-entry" title="<?php echo $this->__('Email Address') ?>" />

Answer 2

当您可以使用 HTML5 的内置功能时，为什么还要使用 javascript 来做这件事呢？ http://www.w3schools.com/tags/att_input_placeholder.asp

这是一个 jsFiddle 显示我在说什么：

<form action="something.html" method="post">
    Please enter your login: <input type="text" id="loginTextBox" name="login[username]" placeholder="john@gmail.com" />
    <input type="submit" />
</form>

http://jsfiddle.net/76PvF/

如果你想让占位符文本在获得输入焦点时消失，你可以这样做：

$(document).ready(function(){
    $("#loginTextBox")
        .focus(function(){
            //on focus, put placeholder into data and blank out the placeholder
            $(this).data("placeholder", $(this).attr("placeholder"));
            $(this).attr("placeholder", "");    
        })
    .blur(function(){
            //on blur, put the placeholder back
            $(this).attr("placeholder", $(this).data("placeholder"));
        });
});

更新 jsfiddle：http: //jsfiddle.net/76PvF/1/