Question

我的页面上有一个简单的文本字段，初始文本值为“输入您的电子邮件”。当页面加载时，我会自动将焦点设置到此框，使用以下内容：

<body onLoad="document.emvForm.EMAIL_FIELD.focus()">

我想这样做，以便当用户开始输入框时，它会清除文本，而不是清除焦点上的文本。

我该如何解决这个问题？

Answer 1

尝试以下方法：

<input type="text" id="textField" />

<script type="text/javascript">
    $(document).ready(function(){
        // Set Text to be Default //
        var txtVal = 'Enter Your Email Address';
        $('#textField').val(txtVal).focus();

        // On Focus //
        $('#textField').focus(function(){
            if ($(this).val() == txtVal) $(this).val('');
        });

        // on Blur //
        $('#textField').blur(function(){
            if ($(this).val() == '') $(this).val(txtVal);
        });
    });
</script>

这是小提琴：http://jsfiddle.net/wpZ8n/

我希望这有帮助！

Answer 2

您必须使用位于简单文本字段顶部的<span>或<label>，然后监视是否在输入字段中输入了任何文本。如果有，请隐藏<span>或<label>

Answer 3

在现代（符合HTML5的）浏览器中，只需使用placeholder属性即可添加此功能，如下所示：

<input type="text" placeholder="Enter your Email" />

不幸的是，现代浏览器不包含IE9。为了在IE9和之前的版本中使用，您可以使用以下脚本（作为示例）：

https://github.com/mathiasbynens/jquery-placeholder

（归功于这个答案的答案：Placeholder in IE9，其中还列出了在IE中进行此操作的其他各种方法，并在答案中进行了比较）

Answer 4

使用jQuery

<input class="em" type="text" name="email" value="Enter your Email"/>

$(document).ready(function() {
    $(function() {
        $(".em").focus();
    });

    $(".em").keypress(function() {
          var val = $(this).val(); 
          if (val == 'Enter your Email') {
              $(this).val('')
          }
    });
});

焦点上的文本字段，带有页面加载，带有按类型删除的文本

4 个答案: