Question

创建文本框时，会显示默认的灰色文本（＃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>

但是，只要文本框被聚焦，这个值就会消失。我该怎么做才能纠正这个问题？即使文本框处于焦点下，该值也不会消失，只有当我开始输入时，该值才会消失。我是新用户，所以我无法发布截图。

Answer 1

你想要的是placeholder。

像这样使用它：

<input type="text" name="enterfirstname" placeholder="First Name" />
<input type="text" name="enterlastname" placeholder="Last Name" />

Answer 2

尝试

<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元素内的脚本标记会创建无效的HTML

Answer 3

尝试使用“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>

Javascript在输入文本中复制占位符功能

3 个答案: