Question

请在http://jsfiddle.net/7995m/查看我的小提琴。在小提琴中，一旦单击文本框，默认文本就会消失。我希望在写入文本之前不会更改默认文本。以下是我的代码： -

$(".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();

Answer 1

这将开始使用HTML5占位符属性http://davidwalsh.name/html5-placeholder

它通常用于Web应用程序。

如果您定位的浏览器不支持占位符，则可以使用modernizr创建polyfill以支持html5属性。这是使用jquery https://github.com/mathiasbynens/jquery-placeholder

的polyfill

您可以在此处找到占位符或其他html5属性的其他polyfill： https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

以下是modernizr http://modernizr.com/

的链接

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

这是最好的方式。在短期内创建自定义解决方案非常棒，但使用这样的polyfill有助于避免长期存在的潜在问题，例如新浏览器在未来一年内与自定义解决方案不兼容。使用polyfill填充HTML5属性的功能将确保您的应用程序在将来不会中断，同时允许在旧版浏览器中使用相同的功能。它还有助于您的HTML代码的可读性。

Answer 2

使用placeholder属性减少你的no.of代码行。

实施例

<input type="text" name="first_name" placeholder="Your first name...">

Demo Fiddle

Answer 3

working fiddle

只需将focus替换为keydown。占位符是一个很好的解决方案，但IE7,8,9不支持它。所以我没有使用某些js（有可用的som polyfill），我建议你继续使用这段代码。

$(".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();

Answer 4

您可以使用placeholder属性。

Answer 5

如果你真的想要达到这个目标，虽然它不是标准的行为，而是使用它代替你的焦点事件：

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

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

});

但绝对使用占位符标记，这是正确的方法

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

5 个答案: