0

私は単純なログインフォームに取り組んでいます。ユーザー名とパスワードとして 2 つのテキスト フィールドがあります。

ユーザー名のテキスト フィールドには、「ユーザー名」というヒントがあります。

パスワードテキストフィールドには、「password」というヒントがあります。

テキストボックス内をクリックしているときにヒントテキストを非表示にしたい。

ここで私は2つの問題に直面しました、

  1. ユーザー名のテキスト ボックス内をクリックすると、ヒント テキストが非表示になります。しかし、ctrl+z を押すと、再びヒントが表示され、キーボードの矢印キーを押して編集できます。

  2. 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のプレースホルダー属性を使用できます 

<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 に答える