Swap placeholder text based on resolution (media query)
As a pure CSS solution, we could have two <input>
s - having different placeholder
s - 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:
In this case we should make sure that the
id
of our twoinput
s are different. Besides, Ifid
is added to<input>
just because of its usage forlabel
elements, we could just wrap theinput
bylabel
instead.Using more than one
input
which have the samename
, will override thename/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!.
if ($(window).width() < 400 ) {
$("input[type='email']").attr("placeholder","join our newsletter");
}
else { $("input[type='email']").attr("placeholder","your email");}
demo: http://jsfiddle.net/fcrX5/
While a bit hacky, this is possible to do in pure HTML/CSS (no javascript required) without duplicating elements in the DOM if you only need to show/hide the text, not change it.
The hack is to simply style of the placeholder text differently depending on width (or whatever your media query is) and change the opacity to make it appear or disappear, like so:
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);
}
}