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

Question

I am working on simple login form. 我正在使用简单的登录表单。 I have two text fields as user name and password. 我有两个文本字段，分别是用户名和密码。

user name text field have hint as "user name". 用户名文本字段的提示为“用户名”。

password text field have hint as "password". 密码文本字段的提示为“密码”。

I want to hide hint text while clicking inside textbox. 我想在文本框内单击时隐藏提示文本。

here i faced two problems, 在这里我遇到两个问题，

if i click inside user name text box the hint text is hiding. 如果我在用户名文本框中单击，则提示文本将隐藏。 but when i press ctrl+z then again the hint appearing and able to edit by pressing keyboard arrow keys. 但是当我按ctrl + z时，提示再次出现，并且可以通过按键盘上的箭头键进行编辑。
second one is the password text field type is password. 第二个是密码文本字段类型是密码。 so it is not showing hint text as "password". 因此它不会将提示文本显示为“密码”。

here is my code: 这是我的代码：

<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>

can any one please... 可以请任何一个...

Answer 1

I suggest you to use placeholder . 我建议您使用placeholder 。 you dont need any JavaScript for that and it is supported by all latest browsers. 您不需要任何JavaScript，并且所有最新浏览器都支持它。 jsfiiddle jsfiiddle

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

Answer 2

There is a HTML5 attribute that does that called placeholder . 有一个HTML5属性，它称为placeholder 。 So you just do: 因此，您只需执行以下操作：

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

And for the backward compatibility (older browsers) you just follow this tutorial . 为了向后兼容（旧版浏览器），您只需按照本教程进行操作即可。

Answer 3

You could use HTML5′s placeholder Attribute 您可以使用HTML5的占位符属性

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

For supporting old browsers: 对于支持旧版浏览器：

<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 个解决方案

解决方案1
1 2012-10-06 08:07:54

解决方案2
1 已采纳 2012-10-06 08:08:21

解决方案3
1 2012-10-06 08:10:19

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

问题描述

3 个解决方案

解决方案1 1 2012-10-06 08:07:54

解决方案2 1 已采纳 2012-10-06 08:08:21

解决方案3 1 2012-10-06 08:10:19

解决方案1
1 2012-10-06 08:07:54

解决方案2
1 已采纳 2012-10-06 08:08:21

解决方案3
1 2012-10-06 08:10:19