jQuery 根据分辨率交换占位符文本（媒体查询）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18176102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Swap placeholder text based on resolution (media query)
提问by Francesca
I'm working on a responsive design. I've hit a bit of a wall with there not being enough space for an inputbox and it's label. So I have decided to hide the label on smaller screen sizes.
我正在研究响应式设计。我撞到了一堵墙，没有足够的空间放一个input盒子，它是label。所以我决定在较小的屏幕尺寸上隐藏标签。
At present it has the placeholder text your emailinside it, but I want onlyon screens less than 400 (so up to 399px wide) a different place holder of Join our newsletter.
目前它your email里面有占位符文本，但我只想要在小于 400（所以高达 399px 宽）的屏幕上使用不同的Join our newsletter.
I reckon there will need to be some JS to perform this, rather than anything with CSS.
我认为需要一些 JS 来执行此操作，而不是任何 CSS。
Essentially: if screen size less than 400: placeholder text = Join our newsletter
本质上：如果屏幕尺寸小于 400：占位符文本 = 加入我们的时事通讯
else: placeholder text = Your email.
否则：占位符文本 = 您的电子邮件。
Here is the HTML I have:
这是我拥有的 HTML：
<div id="mc_embed_signup">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>
采纳答案by Hashem Qolami
As a pure CSS solution, we could have two <input>s - having different placeholders - which are shown in different screen sizes - Example here:
作为纯 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">Important notes:
重要笔记：
In this case we should make sure that the
idof our twoinputs are different. Besides, Ifidis added to<input>just because of its usage forlabelelements, we could just wrap theinputbylabelinstead.Using more than one
inputwhich have the samename, will override thename/valuepair in HTTP request method.
在这种情况下，我们应该确保
id我们的两个inputs 不同。此外，将 Ifid添加到<input>只是因为它用于label元素，我们可以将inputby包装起来label。使用多个
input具有相同name, 将覆盖name/valueHTTP 请求方法中的一对。
One possible solution is to use an array name value for nameattribute, (as example above) and handle it at server-side (It's better to keep namevalues in lowercase).
一种可能的解决方案是对name属性使用数组名称值（如上例）并在服务器端处理它（最好将name值保持为小写）。
Alternatively, we could disablethe hidden inputin order to prevent its value from being sent to server:
或者，我们可以disable隐藏input以防止其值被发送到服务器：
$('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!.
在纯 CSS 解决方案中使用 JavaScript ？也许……也许不是……但是现在现代世界中没有任何网站是没有 JavaScript 的。如果它有助于摆脱问题，弄脏手也没关系！。
回答by mtt
if ($(window).width() < 400 ) {
$("input[type='email']").attr("placeholder","join our newsletter");
}
else { $("input[type='email']").attr("placeholder","your email");}
回答by patr1ck
While a bit hacky, this is possible to do in pure HTML/CSS (no javascript required) without duplicating elements in the DOM ifyou only need to show/hide the text, not change it.
虽然有点 hacky，但如果您只需要显示/隐藏文本而不是更改文本，则可以在纯 HTML/CSS（不需要 javascript）中完成，而无需在 DOM 中复制元素。
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:
hack 是根据宽度（或您的媒体查询是什么）简单地设置占位符文本的不同样式，并更改不透明度以使其出现或消失，如下所示：
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);
}
}
回答by daisylaflamme
This script include initial setting of the placeholder and changing on resizing the window:
//set responsive mobile input field placeholder text
if ($(window).width() < 769) {
$("input").attr("placeholder", "Short text");
}
else {
$("input").attr("placeholder", "Long text for wide input filed");
}
$(window).resize(function () {
if ($(window).width() < 769) {
$("input").attr("placeholder", "Short text");
}
else {
$("input").attr("placeholder", "Long text for wide input field");
}
});
回答by Nadav SInai
if you use angular and lodash you can use this directive I've written for my use in one projects where the designer insisted...
如果您使用 angular 和 lodash，您可以使用我为在设计师坚持的一个项目中使用而编写的指令...
lodash is used only to save us writing the debouncer function for window.resize events, can be replaced in 5 minutes of boilerplate setTimeout thingy...
lodash 仅用于节省我们为 window.resize 事件编写 debouncer 函数，可以在 5 分钟的样板中替换 setTimeout 东西...
angular.module('yourModuleNameHere').directive('mediaPlaceholder', function ($window, $parse) {
return {
restrict: 'A',
link: function ($scope, $elem, $attrs) {
var defObj = $parse($attrs.mediaPlaceholder)($scope);
function setPlaceholder() {
var lastFitting, windowWidth = $($window).width();
angular.forEach(defObj, function (placeholderValue,widthSetting) {
if (parseInt(widthSetting) <= windowWidth) {
lastFitting = placeholderValue;
}
});
$elem.attr('placeholder', lastFitting);
}
setPlaceholder();
$($window).resize(_.debounce(setPlaceholder, 40));
}
};
})
use like this:
像这样使用：
<input type="search" media-placeholder="{0:'search',989:'long search placeholder'}">
回答by adeneo
Just check for the screen size, and act accordingly :
只需检查屏幕尺寸，然后采取相应措施：
$(function() {
var txt = screen.width < 400 ? 'Join our newsletter' : 'Your email';
$('#mce-EMAIL').attr('placeholder', txt);
});
Note that you explicitly asked for "screen size", window size and resize events are something else entirely.
请注意，您明确要求“屏幕大小”、窗口大小和调整大小事件完全是另一回事。
