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

Posted 2023-03-05

【中文标题】根据分辨率交换占位符文本（媒体查询）

【英文标题】：Swap placeholder text based on resolution (media query)

【发布时间】：2013-08-13 02:55:28

【问题描述】：

我正在开发响应式设计。我碰壁了，没有足够的空间容纳input 盒子，它是label。所以我决定在较小的屏幕尺寸上隐藏标签。

目前它在其中包含占位符文本 your email，但我希望仅在小于 400（因此最大 399 像素宽）的屏幕上使用 Join our newsletter 的不同占位符。 p>

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

基本上： 如果屏幕尺寸小于 400： 占位符文本 = 加入我们的时事通讯

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

这是我的 html：

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

【问题讨论】：

如果您正在寻找纯 CSS 解决方案，您可以使用不同的占位符创建 2 个input，并通过 CSS3 @media 管理它们的 display 属性。

【参考方案1】：

此脚本包括占位符的初始设置和更改窗口大小时的文本：

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

【参考方案2】：

根据上面@hashem 的出色回答，这里有一个引导方法。

使用Bootstrap 4.5，标准的@media 查询断点位于：

xs - sm - 576px 及以上 md - 768px 及以上 lg - 992px 及以上 xl - 1200px 及以上

见：https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

假设您想在 xs 屏幕尺寸的输入控件上方使用文本，并为 sm 屏幕尺寸及以上使用占位符，以下是如何使用 Bootstrap 做到这一点：

<div class="d-flex">
  ...
  <!-- size xs: use text above input. -->
  <div class="d-block d-sm-none mx-auto my-0 text-center">
    LABEL TEXT
    <div class="d-flex flex-row">
      <input id="input-narrow" class="mx-auto my-0 p-1 text-center">
    </div>
  </div>
  <!-- size sm and up: use placeholder -->
  <div class="d-none d-sm-flex flex-row flex-nowrap mx-auto my-0">
      <input id="input-wide" class="mx-auto my-0 p-1 text-center" placeholder="LABEL TEXT">
  </div>
  ...
</div>

【参考方案3】：

作为纯 CSS 解决方案，我们可以有两个 <input>s - 具有不同的 placeholders - 以不同的屏幕尺寸显示 - 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">

重要提示：

在这种情况下，我们应该确保我们的两个inputs 中的id 是不同的。此外，如果将id 添加到<input> 只是因为它用于label 元素，我们可以将input 包装为label。

使用多个具有相同name 的input，将覆盖HTTP 请求方法中的name/value 对。

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

或者，我们可以 disable 隐藏 input 以防止其值被发送到服务器：

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

在纯 CSS 解决方案中使用 javascript？ 也许……也许不是……但如今，现代世界中没有任何网站是没有 JavaScript 的。如果对解决问题有帮助的话，弄脏手也没关系！

【讨论】：

好主意！没有这么想过。谢谢！

这是一个聪明的解决方案，如果您将两个字段绑定到同一个数据模型，它可以很好地在 Angular 应用程序中运行

简单而优雅的解决方案。谢谢。

【参考方案4】：

如果你使用 angular 和 lodash，你可以使用我为我编写的这个指令在设计师坚持的一个项目中使用......

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

这样使用：

<input type="search" media-placeholder="0:'search',989:'long search placeholder'">

【参考方案5】：

虽然有点 hacky，但这可以在纯 HTML/CSS（不需要 javascript）中完成，而无需在 DOM 中复制元素 如果您只需要显示/隐藏文本，而不是更改它.

技巧是根据宽度（或您的媒体查询是什么）简单地设置占位符文本的不同样式，并更改不透明度以使其出现或消失，如下所示：

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

【讨论】：

据我所知，该语法不起作用。为了使它工作，我必须创建单独的条目，例如

【参考方案6】：

if ($(window).width() < 400 ) 
    $("input[type='email']").attr("placeholder","join our newsletter");

else  $("input[type='email']").attr("placeholder","your email");

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

【讨论】：

感谢 jQuery 解决方案。 :-)

【参考方案7】：

只需检查屏幕尺寸，并采取相应措施：

$(function() 
    var txt = screen.width < 400 ? 'Join our newsletter' : 'Your email';
    $('#mce-EMAIL').attr('placeholder', txt);
);

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