0

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

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

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

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

在这里我遇到了两个问题，

  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>

任何人都可以请...

4

3 回答 3

1

我建议你使用placeholder. 你不需要任何 JavaScript 并且所有最新的浏览器都支持它。jsfiiddle

 <input type="text" id="username" placeholder="user name" onclick="ForUserName();" onkeyup="ForUserName();">
于 2012-10-06T08:07:54.150 回答
1

有一个 HTML5 属性可以做到这一点，称为placeholder. 所以你只需这样做：

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

对于向后兼容性（旧浏览器），您只需遵循本教程即可。

于 2012-10-06T08:08:21.690 回答
1

你可以使用HTML5 的 placeholder 属性 

<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';}">
于 2012-10-06T08:10:19.037 回答