在焦点上更改占位符文本

Posted 2023-03-05

【中文标题】在焦点上更改占位符文本

【英文标题】：Changing Placeholder Text On Focus

【发布时间】：2012-09-14 04:09:19

【问题描述】：

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

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

会变成这样：

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

当输入处于活动状态时。

【问题讨论】：

请记住 IE9 及以下不支持placeholder 并且某些浏览器会在输入获得焦点时清除文本。

【参考方案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

【讨论】：

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

@Muli 你需要添加一个blur处理程序，就像上面的代码sn-p！

答案添加到返回功能，不使用标题属性。问候。

【参考方案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- 属性或其他属性。

【参考方案3】：

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

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

然后，您需要一个 JavaScript 函数来交换 focus 和 focusout 的属性

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

更多关于 DATA 属性：https://www.w3schools.com/tags/att_global_data.asp