jquery – 基于分辨率交换占位符文本(媒体查询)

我正在做一个敏感的设计。我打了一个墙，没有足够的空间用于输入框，它的标签。所以我决定把标签隐藏在较小的屏幕尺寸上。

目前，它的占位符文本中包含您的电子邮件，但我只想在屏幕上不到400(宽达399像素宽)加入我们的通讯不同的地方。

我估计需要一些JS来执行这个，而不是任何CSS。

主要有：
如果屏幕尺寸小于400：
占位符text =加入我们的通讯

其他：
占位符text =您的电子邮件。

这是我有的HTML：

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

解决方法

作为一个纯CSS解决方案，我们可以有两个< input> s – 具有不同的占位符 – 以不同的屏幕大小显示 – Example here：

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

重要笔记：

>在这种情况下，我们应该确保我们两个输入的id不同。此外，如果id被添加到< input>只是因为它用于标签元素，我们可以用标签替换输入。
>使用多个具有相同名称的输入，将覆盖HTTP请求方法中的名称/值对。

一个可能的解决方案是使用名称属性的数组名称值(如上面的示例)，并在服务器端处理它(最好将名称值保留为小写)。

或者，我们可以禁用隐藏的输入，以防止将其值发送到服务器：

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

在纯CSS解决方案中使用JavaScript？也许…也许不是…但现在世界上没有网站没有JavaScript。如果这有助于摆脱这个问题，那么让手有点脏！

原文地址：https://www.jb51.cc/jquery/182507.html