鼠标悬停时jQuery输入值更改答案

【问题标题】：jquery input value change on mouseover鼠标悬停时jQuery输入值更改
【发布时间】：2012-06-09 21:45:21
【问题描述】：

我想在我的表单中实现 jquery/js，并且我想让输入值动态化。基本上这个想法是，一旦单击该字段的值就会消失/模糊并且 jquery 期望用户插入一个值，如果一个值被设置并且它不一样作为默认值就可以了。但是如果用户写入的值是一样的然后不接受并抛出错误，否则如果用户“输入”的值为空再次显示默认值。我相信这是有道理的，因为我认为我已经在很多网站上看到了这个功能实现。但我现在是 jquery 人所以我不知道怎么做。我可以在 php 中做同样的事情，但页面刷新是我想要避免的。所以假设我们有：

<input type="text" value="City" />

非常感谢，博尔尼。

【问题讨论】：

$('input').mouseover(function(){ $(this).trigger('focus'); })
用 jquery/javascript 怎么做？

标签： jquery forms input jquery-validate validation

【解决方案1】：

点赞here?

$(document).ready(function() {

    $('input[class="foo"]').attr('value', $(this).attr('placeholder')).focus(function() {
        if ($(this).val('placeholder')) {
            $(this).attr('value', '');
        }
    }).blur(function() {
        if ($(this).val() == '') {
            $(this).attr('value', $(this).attr('placeholder'))
        }
    });
});

编辑：更新代码并修改 Christopher Ramírez 提供的建议

【讨论】：

谢谢，这正是我想要的。谢谢谢谢。
没问题，很高兴能帮上忙:)
谢谢大家了。我刚刚访问了 jsfidle 并且在我看到 html 的那一刻完全理解了你的 jquery 代码。
这不是一个好的解决方案，因为它使用全局变量来存储占位符值。尝试使用存储在每个输入元素上的属性而不是变量。理想的属性实际上是placeholder。
placholder 不适用于所有浏览器，因为它是 HTML5 属性，我只是建议了一种我一直使用的替代方法。作为旁注，在我提交自己的答案之前，我是对你的答案表示赞同的人：)

【解决方案2】：

您想要的称为“占位符”。它们在 Webkit 和 Mozilla 等现代浏览器中实现。我不确定新版本的 IE 是否实现了它们。

要使用它们，请在您的 input 元素中声明一个名为 placeholder 的新属性。像这样：

<input type="text" name="fullname" placeholder="Type your full name" />

作为备份，当浏览器不支持placeholder 属性时，this arclicle 可能会帮助您到达您想要的位置

更新：This is a plugin 我刚刚找到。看起来很容易使用。

【讨论】：