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

Question

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

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

它通常用于网络应用程序。

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

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

这里是 modernizr 的链接 http://modernizr.com/

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

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