Question

我想在电子邮件文本框中显示示例文本，因此我使用了代码： -

<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') ?>" />

但是当我点击提交按钮而没有输入值时，它认为示例文本意味着"john@gmail.com"作为登录ID，但它必须显示错误“必填字段”。请帮帮我。

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

为什么要使用javascript来执行此操作，何时可以使用HTML5的内置功能？ 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/

不要将示例文本视为文本框的值

2 个答案: