基于@media宽度大小在不同输入之间切换 [英] switching between different inputs in a form based on @media width size

问题描述

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

I have a form. I want to use input A in the form if @media (min-width: 768px), otherwise I want to use input B.

我需要切换输入的原因是因为 select.js在移动视图中是错误的，但是在桌面视图上它是真棒。 / a>

The reason I need to switch inputs is because select.js is buggy in mobile views, however it is awesome on desktop views.

使用引导程序或使用显示使用 xs-hidden和xs-visible ：block / none 不工作。输入仍在源代码中，仍将提交。

Using xs-hidden and xs-visible with bootstrap or using display: block/none does not work. The inputs are still in the source code and will still be submitted.

示例：

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

推荐答案

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

Depending on the browsers you're trying to use, you could use javascript's matchMedia() method to detect the viewport's width (IE11+) or you can use whatever javascript library you're using (jQuery) to disable the controls at certain page widths. Disabled controls don't get posted to the server when a form is submitted.

正如你已经发现的，这不能简单地通过CSS来完成，因为即使在隐藏DOM之后，控件仍然会存在于DOM中。

As you've already discovered, this can't easily be done purely with CSS because the controls will still exist in the DOM even after hiding them.

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

Note: You probably don't want to outright remove the controls from the DOM because you may need to re-add them based on window resize, device rotation, etc.

未测试的示例：

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

这篇关于基于@media宽度大小在不同输入之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！