根据分辨率(媒体查询)交换占位符文本

Question

我正在研究响应式设计.我已经碰到了一堵墙,因为没有足够的空间放置一个input盒子而且它就是这样label.所以我决定将标签隐藏在较小的屏幕尺寸上.

目前它有占位符文本your email里面,但我想只有在屏幕上小于400(所以到399px宽)的不同的占位符Join our newsletter.

我认为需要有一些JS来执行此操作,而不是使用CSS.

基本上:如果屏幕尺寸小于400:占位符文本=加入我们的新闻通讯

else:占位符文本=您的电子邮件.

这是我的HTML:

<div id="mc_embed_signup">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>

Answer 1

作为纯CSS解决方案,我们可以有两个<input>s - 具有不同的placeholders - 以不同的屏幕尺寸显示 - 示例如下:

input.large { display: inline-block; }
input.small { display: none; }

@media (max-width: 399px) { 
  input.large { display: none; }
  input.small { display: inline-block; }
}

<input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email">
<input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">

重要笔记:

1. 在这种情况下,我们应该确保id我们两者input的不同.此外,If 仅仅因为它对元素的使用而id被添加,我们可以只包装by .<input>labelinputlabel

2. 使用多个input具有相同内容的HTTP name将name/value在HTTP请求方法中覆盖该对.

一种可能的解决方案是使用name属性的数组名称值(如上所示)并在服务器端处理它(最好将name值保持为小写).

或者,我们可以disable隐藏input以防止其值被发送到服务器:

$('input:hidden').prop("disabled", true);

在纯CSS解决方案中使用JavaScript ？也许......也许不是......但是现在世界上没有任何网站没有JavaScript.如果它有助于摆脱问题,那么让手有点脏!

Answer 2

if ($(window).width() < 400 ) {
    $("input[type='email']").attr("placeholder","join our newsletter");
}
else { $("input[type='email']").attr("placeholder","your email");}

演示:http://jsfiddle.net/fcrX5/

Answer 3

虽然有点hacky,但如果您只需要显示/隐藏文本而不是更改它,则可以在纯HTML/CSS(不需要javascript)中执行,而无需在DOM中复制元素.

黑客是根据宽度(或任何媒体查询)不同地简单地设置占位符文本的样式,并更改不透明度以使其显示或消失,如下所示:

input.responsive::-webkit-input-placeholder,
input.responsive::-moz-placeholder,
input.responsive:-moz-placeholder,
input.responsive:-ms-input-placeholder { 
    color: rgba(25, 25, 25, 1.0);
}

@media (max-width: 399px) { 
    input.responsive::-webkit-input-placeholder,
    input.responsive::-moz-placeholder,
    input.responsive:-moz-placeholder,
    input.responsive:-ms-input-placeholder { 
        color: rgba(0, 0, 0, 0);
    }
}