javascript - 使用 jQuery 调整窗口大小时更改占位符文本

Question

使用 jQuery，当用户使用小型设备(~320 像素或更小)时，如何将占位符文本更改为文本区域？我希望它针对小屏幕更改为“回复...”，但任何大于 320 像素的屏幕，它都会恢复为“回复 [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 );

我怎样才能恢复到原来的占位符？

Answer 1

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

$('.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');