0

请在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();
4

5 回答 5

3

这将使您开始使用 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 将检测渲染页面的浏览器是否支持 placeholder 属性，如果不支持，则 polyfill 将模拟该行为。这样，HTML 代码不会被自定义解决方案污染，并且未来的浏览器如果支持占位符也不会受到影响。

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

于 2013-08-03T06:37:27.650 回答
2

placeholder通过使用属性减少代码行数 。

前任

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

演示小提琴

于 2013-08-03T06:36:00.347 回答
2

工作小提琴

只需将您focus的替换为keydown.Placeholder 是一个很好的解决方案，但 IE7、8、9 不支持它。因此，不要使用一些 js（有可用的 som polyfills），我建议您继续使用此代码本身。

$(".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();
于 2013-08-03T06:36:55.080 回答
0

你可以使用placeholder属性。

于 2013-08-03T06:36:56.873 回答
0

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

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

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

});

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

于 2013-08-03T06:37:08.900 回答