根据分辨率交换占位符文本（媒体查询） [英] Swap placeholder text based on resolution (media query)

问题描述

我正在开发一个响应式设计。我没有足够的空间存放输入框并且它的 label 。所以我决定在较小的屏幕尺寸上隐藏标签。

目前它的占位符文本您的电子邮件里面，但我希望在屏幕小于400（如此高达399px宽）不同的地方持有人加入我们的通讯。 p>

我认为需要一些JS来执行此操作，而不是使用CSS的任何操作。

实质上：
如果屏幕尺寸小于400：
placeholder text =加入我们的通讯

其他：
placeholder text =您的电子邮件。

以下是我的HTML：

 < div id =mc_embed_signup > 
< input type =emailvalue =name =EMAILclass =required emailid =mce-EMAILplaceholder =Your Email> 
< / div> 
  

解决方案

作为纯粹的CSS解决方案，我们可以有两个< input> s - 具有不同的占位符 s - 以不同的屏幕尺寸显示 - 此处为示例 ：

  input.large {display：inline-block; } input.small {display：none; } @media（max-width：399px）{input.large {display：none; } input.small {display：inline-block; }  

< input type =emailname = email []class =required email largeid =mce-EMAILplaceholder =Your Email>< input type =emailname =email []class =required email smallplaceholder =加入我们的通讯>

h3>

1. 在这种情况下，我们应该确保我们两个 c input s是不同的。此外，仅仅因为标签的用法，< id 被添加到< input> 元素，我们可以用 label 来代替输入。




2. 使用具有相同名称的多个输入，将在HTTP请求方法中覆盖名称/值对。

<一个可能的解决方案是为名称属性使用一个数组名称值（如上例所示），并在服务器端处理它（最好保留<

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



  $（'input：hidden'）。prop（disabled，true）; 
  

在纯CSS解决方案中使用JavaScript？也许...也许不是......但是现在的世界上没有任何网站是空的JavaScript。如果它有助于摆脱这个问题，可以让手脏一点！

I'm working on a responsive design. I've hit a bit of a wall with there not being enough space for an input box and it's label. So I have decided to hide the label on smaller screen sizes.

At present it has the placeholder text your email inside it, but I want only on screens less than 400 (so up to 399px wide) a different place holder of Join our newsletter.

I reckon there will need to be some JS to perform this, rather than anything with CSS.

Essentially: if screen size less than 400: placeholder text = Join our newsletter

else: placeholder text = Your email.

Here is the HTML I have:

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

解决方案

As a pure CSS solution, we could have two <input>s - having different placeholders - which are shown in different screen sizes - 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">

Important notes:

1. In this case we should make sure that the id of our two inputs are different. Besides, If id is added to <input> just because of its usage for label elements, we could just wrap the input by label instead.

2. Using more than one input which have the same name, will override the name/value pair in HTTP request method.

One possible solution is to use an array name value for name attribute, (as example above) and handle it at server-side (It's better to keep name values in lowercase).

Alternatively, we could disable the hidden input in order to prevent its value from being sent to server:

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

Using JavaScript in a Pure CSS Solution? Maybe... maybe not... but nowadays no websites in the modern world are empty of JavaScript. If it helps to get rid of the problem, it's alright to get hands a little dirty!.

这篇关于根据分辨率交换占位符文本（媒体查询）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！