1

使用 jQuery，当用户使用小型设备（约 320 像素或更少）时，如何将占位符文本更改为文本区域？对于小屏幕，我希望它更改为“回复...”，但任何大于 320 像素的内容，它都会恢复为“回复 [姓名]...”

目前，我的 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 );

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

4

4 回答 4

2

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

$('.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');
于 2013-07-22T21:21:40.463 回答
1

您的页面上有多个问题

<textarea class="my_textarea"

并且您的选择器正在选择作为id 属性

$('#my_textarea')

应该是

$('.my_textarea')

您可以使用$.each迭代所有元素并相应地设置它们。

接下来，每个textarea都有不同的占位符值。所以现在是HTML-5data-* 属性的时候了。

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 );
于 2013-07-22T21:15:21.073 回答
0

使用数组保存初始值，然后遍历数组。

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

演示：http: //jsfiddle.net/dirtyd77/CmaZg/

于 2013-07-22T21:23:08.307 回答
0

将旧占位符保存在数据属性中，然后在返回时将其恢复

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;
    }   
}
于 2013-07-22T21:23:48.770 回答