Question

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

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

会变成这样：

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

输入有效时

。

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/

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-属性或其他属性。

Answer 3

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

<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

在焦点上更改占位符文本

3 个答案: