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

Question

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]..."

Currently, my 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?

Answer 1

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

Answer 2

Multiple issues on your page

<textarea class="my_textarea"

And your selector is selecting as an id attribute

$('#my_textarea')

Supposed to be

$('.my_textarea')

You can use $.each to iterate over all the elements and set them accordingly.

Next , each textarea has different placeholder values. So it is a time for HTML-5 data-* attributes.

HTML

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

JS

function changePlaceholder() {
    var windowWidth = $(window).width();

    if(windowWidth < 320 ) {
        $('.my_textarea').attr('placeholder','Reply...');
    }
    else {
         $('.my_textarea').each(function() {
              var that = this;
              $(this).attr('placeholder', function(_, plc) {
                    return that.data('placeholder');
              });
         });
    }
}

// initiate first
changePlaceholder();

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

Answer 3

Use an array to hold initial values then iterate over array.

var placeholderValues = [];

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

// initiate first
changePlaceholder();

//get values
$('.my_textarea').each(function(){
   placeholderValues.push($(this).attr('placeholder'));
});

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

DEMO: http://jsfiddle.net/dirtyd77/CmaZg/

Answer 4

Save the old placeholder in a data attribute, then restore it when returning

var shrunk = false; // Keep from repeating this when not necessary
function changePlaceholder() {
    if(!shrunk && $(window).width() < 320){
        $('.my_textarea').each(function() {
            $this = $(this);
            $this.data('save-placeholder', $this.attr('placeholder'))
                 .attr('placeholder','Reply...');
        });
        shrunk = true;
    } else if (shrunk && $(window).width >= 320) {
        $('.my_textarea').each(function() {
            $this = $(this);
            $this.attr('placeholder', $this.data('save-placeholder'));
        });
        shrunk = false;
    }   
}