聚焦时更改占位符文本

Question

当输入框处于焦点状态时，是否有一种简单的解决方案可以更改占位符文本？例如：

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

将变成这样：

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

当输入处于活动状态时。

- Rich

---

请注意，IE9及以下版本不支持“placeholder”，而一些浏览器在输入框获得焦点时会清除文本。 - MrOBrian

Answer 1

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

http://jsfiddle.net/ByLGs/

• attr
• focus
• blur

- Ram

---

用户点击其他地方后如何恢复第一个占位符？ - Muli

@Muli，你需要添加一个“模糊”处理程序，就像上面的代码片段一样！ - Ram

已添加答案以返回功能，无需使用title属性。问候。 - Benjamin

Answer 2

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

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

$('input').on('focus', function(){
    $(this).data('placeholder', $(this).attr('placeholder')); // Store for blur
    $(this).attr('placeholder', $(this).attr('title'));
}).on('blur', function(){
    $(this).attr('placeholder', $(this).data('placeholder'));
});​

演示: http://jsfiddle.net/m6j8m/ 这可以缩短，但你已经明白了。这样，你就不必在JavaScript中跟踪属性值，所有内容都在HTML中，因此这是一种一刀切的解决方案。如果使用“title”不适合您的需求，则可以改用“data-”属性或其他属性。

- Wesley Murch

Answer 3

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

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

接下来，您需要一个JavaScript函数来在焦点和失焦时交换属性

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);
});

关于数据属性的更多信息：https://www.w3schools.com/tags/att_global_data.asp

- Benjamin