1

テキストボックスが作成されると、デフォルトの灰色のテキスト (#888) が表示されます。フォーカスが与えられると、値が消えて、入力された値が表示されるようになります。この問題のコードを書きましたが、次のとおりです。

<html>
    <script type="text/javascript">
        function Focus(i) {
            if (i.value == i.defaultValue) {
                i.value = "";
                i.style.color = "#000";
            }
        }

        function Blur(i) {
            if (i.value == "") {
                i.value = i.defaultValue;
                i.style.color = "#888";
            }
        }
    </script>

    <body>
        <input type="text" name="enter firstname" title="First Name" style="color:#888;"
        value="First Name" onfocus="Focus(this)" onblur="Blur(this)" />
        <input type="text" name="enterlastname" title="Last Name" style="color:#888;"
        value="lastname" onfocus="Focus(this)" onblur="Blur(this)" />
    </body>

</html>

しかし、ここではテキストボックスがフォーカスされるたびに、値が消えています。これを修正するにはどうすればよいですか? テキスト ボックスがフォーカスされていても、値が消えることはなく、入力を開始したときにのみ値が消えるはずです。私は新しいユーザーなので、スクリーンショットを投稿できません。

4

3 に答える 3

5

あなたが望むものは呼ばれplaceholderます。

次のように使用します。

<input type="text" name="enterfirstname" placeholder="First Name" />
<input type="text" name="enterlastname" placeholder="Last Name" />
于 2012-10-23T12:15:45.037 に答える
0

次のように「onkeydown」を使用してみてください...

function Focus(cntrl,value)
{
    if (cntrl.value == value)
    {
       cntrl.value           = '';
       cntrl.style.color     = '#000';
    }
} 
function Blur(cntrl,value)
{
    if (cntrl.value == '') 
    {
       cntrl.style.color     = 'gray';
       cntrl.value           = value;                         
    }
}

<body>
     <input type="text" name="enter firstname" title="First Name" style="color:#888;"      value="First Name" onkeydown="Focus(this,'First Name')" onblur="Blur(this,'First Name')" />
     <input type="text" name="enterlastname" title="Last Name" style="color:#888;"      value="lastname" onkeydown="Focus(this,'lastname')" onblur="Blur(this,'lastname')" />
</body>
于 2012-10-23T12:23:42.393 に答える
0

試してみてください

<html>
<head>
<script type="text/javascript">
    function Focus(i) {
        if (i.value == i.defaultValue) {
            i.value = "";
            i.style.color = "#000";
        }
    }

    function Blur(i) {
        if (i.value == "") {
            i.value = i.defaultValue;
            i.style.color = "#888";
        }
    }
</script>
</head>
<body>
    <input type="text" name="enter firstname" title="First Name" style="color:#888;"
    value="First Name" onfocus="Focus(this)" onblur="Blur(this)" />
    <input type="text" name="enterlastname" title="Last Name" style="color:#888;"
    value="lastname" onfocus="Focus(this)" onblur="Blur(this)" />
</body>

</html>

注: body/head 要素内にない script タグは無効な HTML を作成します

于 2012-10-23T12:17:20.507 に答える