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

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

javascript html

Javascript在输入文本中复制占位符功能,javascript,html,Javascript,Html,创建文本框时，默认情况下，灰色文本888将显示一个文本框。当它被赋予焦点时，该值应该消失并开始显示键入的值。我已经为这个问题编写了代码，如下所示： <html> <script type="text/javascript"> function Focus(i) { if (i.value == i.defaultValue) { i.value = ""; i.

创建文本框时，默认情况下，灰色文本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>

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

您需要的是占位符

像这样使用它：

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

您需要的是占位符

像这样使用它：

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

试一试

<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

<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

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

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

首先，不在body/head元素中的脚本标记会创建无效的HTML，甚至可能在某些浏览器中导致一些异常。i.defaultValue未定义，但我会选择占位符解决方案=>非常简单，i din het u@sujathan。将脚本标记放在body/head中有什么不对？首先正确阅读注释，这样可以更快地得到答案。.首先，不在body/head元素中的脚本标记创建无效HTML，甚至可能导致某些浏览器中出现一些异常。i.defaultValue未定义，但我选择占位符解决方案=>非常简单，我在苏贾丹。在body/head中放置脚本标签有什么不对？首先正确阅读关于占位符的评论如果你想在HTML5之前支持占位符属性，我可以推荐jQuery占位符插件。占位符是个好主意，但IE不支持它，所以他仍然需要一些东西来适应IE用户。关于占位符如果你想在HTML5之前支持占位符属性，我可以推荐jQuery占位符插件。占位符是个好主意，但是IE不支持它，所以他仍然需要一些东西来适应IE用户。我没有得到我所期望的。请参考此链接，它显示了我在“想要帮助”下的问题，文本框中有我的问题我没有得到我所期望的。请参考此链接，它显示了我在“想要帮助”下的问题，文本框中有我的问题谢谢，我得到了答案，但当光标放置时，光标位于最后一个位置，即最后一个字母。我该怎么做，把光标放在第一个位置谢谢，我得到了答案，但是当光标放在最后一个位置时，光标就在最后一个字母。我应该怎么做，将光标放在第一个位置