Javascript 在使用jQuery输入文本之前，不要更改文本框中的默认值

请检查一下我的小提琴。在小提琴中，单击文本框后，默认文本将立即消失。我希望在写入文本之前，默认文本不会更改。以下是我的代码：-

$(".defaultText").focus(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();        

---

使用

占位符

属性减少代码行数

前

只需将您的

focus

替换为

keydown

。占位符是一个很好的解决方案，但IE7,8,9不支持它。因此，我建议您继续使用此代码本身，而不是使用一些js（有可用的som多边形填充）

$(".defaultText").keydown(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();   

---

您可以使用占位符属性。

如果您真的想实现这一点，尽管这不是标准行为，但您可以使用它来代替焦点事件：

$(".defaultText").keydown(function(srcc)
{

        $(this).removeClass("defaultTextActive");
        $(this).val("");

});

---

但是一定要使用占位符标记，这是正确的方法

这将让您开始使用HTML5占位符属性

它通常用于web应用程序中

如果目标浏览器不支持占位符，可以使用modernizr创建多边形填充以支持html5属性。下面是一个使用jquery的多边形填充

您可以在此处找到占位符或其他html5属性的其他多边形填充：

这是一个现代化的链接

创建多边形填充后，Modernizer将检测呈现页面的浏览器是否支持占位符属性，如果不支持，多边形填充将模拟该行为。这样，HTML代码就不会受到自定义解决方案的污染，如果将来的浏览器支持占位符，它们也不会受到影响

---

这确实是最好的办法。从短期来看，创建一个定制解决方案是很好的，但是使用这样的polyfill有助于避免长期的潜在问题，例如一年后新浏览器与定制解决方案不兼容。使用polyfill填充HTML5属性的功能将确保应用程序在将来不会中断，同时允许在旧浏览器中使用相同的功能。它还有助于提高html代码的可读性。

我建议您使用占位符属性，而不是使用默认输入值。有两个选项，添加一个多边形填充并学习如何使用它们。或者只需按照我的答案操作……这两个选项都做相同的事情。每种解决方案都有优缺点。Modernizer是一个非常有用的学习工具，不需要花费太多时间。@downvoter请留下评论，以便每个人都能从错误中学习。需要检查html 5兼容性。@downvoter，为什么会这样做？？这实际上回答了OP的问题。

$(".defaultText").keydown(function(srcc)
{

        $(this).removeClass("defaultTextActive");
        $(this).val("");

});