Jquery 更改焦点上的占位符文本

当输入处于焦点时，是否有一个简单的解决方案来更改占位符文本？例如：

<input type="text" placeholder="Join our mailing list!">

将变成这样：

<input type="text" placeholder="enter your email address...">

当输入处于活动状态时

$('input').focus(function() {
    $(this).attr('placeholder', 'enter your email address...')
}).blur(function() {
    $(this).attr('placeholder', 'Join our mailing list!')
})

您将此标记为“jQuery”，因此我假设您愿意使用它。这里有一个简单的方法：

<input type="text" placeholder="Join our mailing list!" title="enter your email address...">​

演示：

---

这可以缩短，但你明白了。通过这种方式，您不必跟踪javascript中的属性值，所有属性值都在HTML中，因此它是一种一刀切的解决方案。如果使用

title

不符合您的需要，您可以使用

data-

属性或其他一些属性。

您可以使用自定义属性“data”来交换内容：

<input type="text" placeholder="Join our mailing list!" data-focus-placeholder="enter your email address..." class="focus-placeholder">​

---

关于数据属性的更多信息：

请记住IE9及以下版本不支持

占位符

，一些浏览器会在输入获得焦点时清除文本。如何在用户单击其他位置后恢复第一个占位符？@Muli您需要添加一个

blur

处理程序，就像上面的代码片段一样！答案添加到返回函数中，使用title attr省略。问候语。

<input type="text" placeholder="Join our mailing list!" data-focus-placeholder="enter your email address..." class="focus-placeholder">​

jQuery('.focus-placeholder').on('focus focusout',function(){

    focusPlaceholder    = jQuery(this).attr('data-focus-placeholder');
    placeholder         = jQuery(this).attr('placeholder');

    jQuery(this).attr('placeholder', focusPlaceholder);
    jQuery(this).attr('data-focus-placeholder', placeholder);
});