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

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.

目前它的内容是你的电子邮件中的占位符文本，但我只希望在不到400（最多399px宽）的屏幕上加入我们的时事通讯。

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.

else：占位符文本=您的电子邮件。

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>

6 个解决方案

#1

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

   在这种情况下，我们应该确保两个输入的id不同。此外，如果id被添加到只是因为它用于标签元素，我们可以通过标签来包装输入。

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

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

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).

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

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!.

在纯CSS解决方案中使用JavaScript？也许......也许不是......但是现在世界上没有任何网站没有JavaScript。如果它有助于摆脱这个问题，那么把手弄得有点脏也没关系！

#2

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/

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

#3

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.

虽然有点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:

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

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);
    }
}

#4

  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");
            }
        });

#5

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.

请注意，您明确要求“屏幕大小”，窗口大小和调整大小事件完全是另一回事。

#6

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 thingy ...

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