Question

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

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

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

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

这里我遇到了两个问题，

如果我在用户名文本框内单击，提示文本将隐藏。但是当我按下ctrl + z然后再次出现提示并通过按键盘箭头键进行编辑。
第二个是密码文本字段类型是密码。所以它没有将提示文本显示为“密码”。

这是我的代码：

<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

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

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

Answer 2

有一个名为placeholder的HTML5属性。所以你只是这样做：

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

为了向后兼容（旧浏览器），您只需按照tutorial。

Answer 3

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

<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';}">

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

3 个答案: