使用jQuery调整窗口大小时更改占位符文本 [英] Changing placeholder text when window resizes with jQuery

问题描述

使用jQuery，当用户在小型设备(〜320px及以下)上时，如何将占位符文本更改为textarea?对于小屏幕，我希望将其更改为答复..."，但大于320像素的任何内容都将恢复为答复[名称] ..."

With jQuery, how can I change the placeholder text to a textarea when a user is on a small device (~320px and less)? I want it to change to "Reply..." for small screens, but anything greater than 320px, it reverts back to "Reply to [name]..."

当前，我的HTML:

<textarea class="my_textarea" rows="1" type="text" placeholder="Reply to Joe..."></textarea>
<textarea class="my_textarea" rows="1" type="text" placeholder="Reply to Jane..."></textarea>

jQuery:

function changePlaceholder() {
    if( $(window).width() < 320 ){
        $('.my_textarea').attr('placeholder','Reply...');
    } else {
      // how do I change it back here if there are many textarea's on the page?
    }   
}

// initiate first
changePlaceholder();

// resize
$(window).resize( changePlaceholder );

如何恢复为原始占位符?

How can I revert back to the original placeholder?

推荐答案

您需要先存储所有不同的占位符，以便可以将它们取回:

You need to first store all the different placeholders so you can get them back:

$('.my_textarea').each(function() {
    $(this).data('placeholder', $(this).attr('placeholder'));
});

function changePlaceholder() {
    if( $(window).width() < 320 ){
        $('.my_textarea').attr('placeholder','Reply...');
    } else {
        $('.my_textarea').each(function() {
            $(this).attr('placeholder', $(this).data('placeholder'));
        });
    }   
}

$(window).resize( changePlaceholder ).trigger('resize');

这篇关于使用jQuery调整窗口大小时更改占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！