Question

我正在研究响应式设计。因为没有足够的空间容纳input框而且它是label，我已经碰了一下墙。所以我决定将标签隐藏在较小的屏幕尺寸上。

目前它内部有占位符文本your email，但我希望仅小于400（因此最多399px宽）的屏幕上{{1}的不同占位符}。

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

本质：如果屏幕尺寸小于400：占位符文本=加入我们的新闻通讯

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

以下是我的HTML：

Join our newsletter

Answer 1

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

重要说明：

在这种情况下，我们应该确保两个id的{{1}}不同。此外，如果将input添加到id只是因为它用于<input>元素，我们可以将label换成input代替。
使用多个具有相同label的{{1}}，将覆盖HTTP请求方法中的input对。

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

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

disable

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

Answer 2

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

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

Answer 3

虽然有点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);
    }
}

Answer 4

var ad1 = GADBannerView()

override func viewDidLoad() {
   ...

   ad1.unitID = "MyUnitID"
   ad1.rootViewController = self
   let request = GADRequest()
   //request.testDevices = [ kGADSimulatorID ]
   ad1.load(request)
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   if indexPath.row == 0 {
      let cell = tableView.dequeueReusableCell(withIdentifier: "pubblicita", for: indexPath)
      ad1.frame = cell.contentView.frame
      cell.contentView.addSubview(ad1)
      return cell
   }
   else {
      ...
   }
}

Answer 5

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

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

请注意，您明确要求“屏幕尺寸”，窗口大小和调整大小事件完全不同。

Answer 6

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

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

像这样使用：

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

Answer 7

基于@hashem 上面的出色回答，这里是一种 Bootstrap 方法。

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

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

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

假设您想在 xs 屏幕大小的输入控件上方使用文本，并在 sm 屏幕大小及以上使用占位符，以下是使用 Bootstrap 执行此操作的方法：

const newSchema = new Schema({ username: {type: String} }, {timestamps: true})

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

7 个答案:

重要说明：