Question

我有一张表格。如果@media（min-width：768px），我想在表单中使用输入A，否则我想使用输入B.

我需要切换输入的原因是因为select.js is buggy in mobile views, however it is awesome on desktop views.

将xs-hidden and xs-visible与引导程序一起使用或使用display: block/none不起作用。输入仍在源代码中，仍将提交。

示例：

<div class="col-xs-12 hidden-xs tag-lg">
   <%= f.input :tag_list, input_html: { class: 'tags', multiple: "multiple" }, collection: ActsAsTaggableOn::Tag.all, value_method: :name, placeholder: '', label: "Tags (seperated by commas):" %>
</div>

<div class="col-xs-12 visible-xs-block tag-sm">
  <%= f.label :tag_list, 'Tags (seperated by commas):', class: 'label-tags'%>
  <%= f.autocomplete_field :tag_list, autocomplete_tag_name_photos_path, :"data-delimiter" => ', ', 'data-auto-focus' => true, :id_element => '#tag_element' %>
</div>

@media (min-width: 768px) {
.tag-lg {
 display: block;   
}
.tag-sm {
    display: none;
}
}

@media (min-width: 100px) and (max-width: 767px) {
.tag-lg {
 display: none;   
}
.tag-sm {
    display: block;
}
}

Answer 1

此代码将显示/隐藏相关的HTML代码。如果你想用纯CSS消除HTML代码，那是不可能的。 CSS只能帮助设置内容样式，而不是将其从DOM中删除。

＆＃13;

.tag-lg {
  display: none;   
}
.tag-sm {
  display: block;
}
@media (min-width: 100px) and (min-width: 768px) {
  .tag-lg {
     display: block;   
  }
  .tag-sm {
     display: none;
  }
}

＆＃13;

<div class="col-xs-12 hidden-xs tag-lg">
  BIG TEXT
</div>

<div class="col-xs-12 visible-xs-block tag-sm">
  Small text
</div>

＆＃13;

您可以使用JQuery找出屏幕大小$( window ).width();，并根据您获得的值删除所请求的元素。

$(document).ready(function() {
    if (( window ).width() > 767){
        $('.tag-sm').remove();
    } 
    else{
        $('.tag-lg').remove();
    }
});

Answer 2

根据您尝试使用的浏览器，您可以使用javascript的matchMedia（）方法来检测视口的宽度（IE11 +），或者您可以使用您正在使用的任何javascript库（jQuery）来禁用某些控件页面宽度。提交表单时，禁用的控件不会发布到服务器。

正如您已经发现的那样，这不能简单地用CSS完成，因为即使隐藏了控件，控件仍然会存在于DOM中。

注意：您可能不希望直接从DOM中删除控件，因为您可能需要根据窗口大小调整，设备旋转等重新添加它们。

未经测试的例子：

$(document).ready(function() {
    if (( window ).width() > 767){
        $('.tag-sm select').prop( "disabled", true );
    } 
    else{
        $('.tag-lg select').prop( "disabled", true );
    }
});

基于@media宽度大小在表单中的不同输入之间切换

2 个答案: