使用 onfocus 和 onblur 从 asp 文本框中删除默认文本答案

【问题标题】：remove default text from asp textbox using onfocus and onblur使用 onfocus 和 onblur 从 asp 文本框中删除默认文本
【发布时间】：2014-09-25 01:29:57
【问题描述】：

我尝试过这样做，但它似乎不起作用。下面是我的代码。当文本框获得焦点时，颜色变为黄色，但保留默认文本。如果我清除文本并失去焦点，则文本框以灰色文本显示“未定义”。最终，我希望默认文本为灰色，焦点时的输入文本为黑色。另外，我想在焦点时更改文本框的背景颜色。任何建议将不胜感激。

HTML

<asp:TextBox ID="TextBox1" runat="server" value="Enter Last Name" onfocus="gotFocus(this)" onblur="lostFocus(this)" Width="175px" CssClass="textbox1"></asp:TextBox>

CSS

.textbox1 {
            color:gray;
        }

Javascript

function gotFocus(obj)
{
    if (obj.value == obj.defaultvalue)
        obj.value = "";

    obj.style.color = "black";
    obj.style.backgroundColor = "yellow";
}

function lostFocus(obj)
{
    if (obj.value == "")
    {
        obj.value = obj.defaultvalue;
        obj.style.color = "gray";
    }

    obj.style.backgroundColor = "transparent";
}

【问题讨论】：

你在哪里设置默认值？
您听说过placeholder 属性吗？

标签： javascript asp.net onfocus

【解决方案1】：

很简单的家伙：

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" placeholder="default value"  Width="175px"></asp:TextBox>

【讨论】：

【解决方案2】：

IE 10 及以上

如果您不关心 IE 9 及以下版本，

占位符是一个不错的选择。

Can I use placeholder?

IE 8 和 9

如果您仍然需要照顾 IE 8 和 9，您可能需要查看 -

AjaxControlToolKit's TextBoxWatermark

【讨论】：

【解决方案3】：

您可能不需要 JS，您可以通过以下方式轻松完成您的要求。 CSS

#TextBox1{
    color:grey; //or any color you want
}
#TextBox1:focus{
    color:white;
    background-color:black;//any color you want
}

这里是fiddle

【讨论】：

非常感谢，这使它变得更好。 # 是什么意思而不是说“。” （#Textbox 与 .Textbox）????
# 代表 id 属性，而 .是上课的

【解决方案4】：

你可以用 CSS 轻松完成，不要使用 Javascript。

#TextBox1 { /* default style */
    color: grey;
}

#TextBox1:focus { /* style to apply on focus */
    color: black;
    background: /* some color */;
}

【讨论】：