如何避免使用javascript在文本框中显示提示文本

Question

我正在做简单的登录表单。我有两个文本字段作为用户名和密码。

用户名文本字段的提示为“用户名”。

密码文本字段有提示为“密码”。

我想隐藏提示文本，同时单击内文本框。

我遇到了两个问题，

1. 如果我单击“内部用户名”文本框，提示文本正在隐藏。但当我按下ctrl+z时，提示再次出现，并能够按下键盘箭头键进行编辑。
2. 第二种是密码文本字段类型是密码。因此，它没有将提示文本显示为“密码”。

这是我的代码：

<html>
<head>
  <title>login</title>
<script>
function ForUserName()
{
    if(document.getElementById('username').value == "user name")
    {
       document.getElementById('username').value='';
    }
    else if(document.getElementById('username').value == '')
    {
       document.getElementById('username').value='user name';
    }
}

function ForPassword()
{
    if(document.getElementById('password').value == "password")
    {
       document.getElementById('password').value='';
    }
    else if(document.getElementById('password').value == '')
    {
       document.getElementById('password').value='password';
    }
}
</script>

</head>
<body>

<input type="text" id="username" value="user name" onclick="ForUserName();" onblur="ForUserName();">
<input type="password" id="password" value="password" onclick="ForPassword();" onblur="ForPassword();">

</body>
</html>  

谁能请你..。

Answer 1

有一个名为HTML5的placeholder属性。所以你就这么做：

<input type="text" id="username" placeholder="user name">

为了实现向后兼容性(旧的浏览器)，您只需遵循这个教程。

Answer 2

我建议你使用placeholder。为此，您不需要任何JavaScript，而且所有最新浏览器都支持它。杰斯菲德尔

 <input type="text" id="username" placeholder="user name" onclick="ForUserName();" onkeyup="ForUserName();">

Answer 3

您可以使用HTML5 5的占位符属性。

<input type="text" id="username"  placeholder="user name">
<input type="password" id="password" placeholder="password">

用于支持旧浏览器：

<input type="text" id="username" value="user name"  onfocus="if (this.value == 'user name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'user name';}">
<input type="password" id="password" value="password" onfocus="if (this.value == 'password') {this.value = '';}" onblur="if (this.value == '') {this.value = 'password';}">