Ich arbeite an einem einfachen Anmeldeformular. Ich habe zwei Textfelder als Benutzername und Passwort.

Benutzername Textfeld haben Hinweis als "Benutzername".

Passwort Textfeld haben Hinweis als "Passwort".

Ich möchte einen Hinweistext ausblenden, während ich in das Textfeld klicke.

Hier hatte ich zwei Probleme,

  1. Wenn ich in das Textfeld Benutzername klicke, wird der Hinweistext ausgeblendet. aber wenn ich Strg + Z drücke, erscheint wieder der Hinweis und kann durch Drücken der Pfeiltasten der Tastatur bearbeitet werden.

  2. Der zweite ist das Passwort. Der Textfeldtyp ist das Passwort. Daher wird kein Hinweistext als "Passwort" angezeigt.

Hier ist mein 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>  

Kann jemand bitte ...

0
suresh.g 6 Okt. 2012 im 12:03

3 Antworten

Beste Antwort

Es gibt ein HTML5-Attribut, das placeholder heißt. Also machst du einfach:

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

Aus Gründen der Abwärtskompatibilität (ältere Browser) folgen Sie einfach diesem Tutorial.

1
Miha Rekar 6 Okt. 2012 im 08:08

Ich empfehle Ihnen, placeholder zu verwenden. Sie benötigen dafür kein JavaScript und es wird von allen neuesten Browsern unterstützt. jsfiiddle

 <input type="text" id="username" placeholder="user name" onclick="ForUserName();" onkeyup="ForUserName();">
1
Anoop 6 Okt. 2012 im 08:07

Sie können das Platzhalterattribut von HTML5 verwenden

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

Zur Unterstützung alter Browser:

<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';}">
1
xdazz 6 Okt. 2012 im 08:10