@mediaの幅のサイズに基づいてフォーム内の異なる入力を切り替える

Question

私はフォームを持っています。 Iは入力を切り替える必要がある理由は、ブートストラップとxs-hidden and xs-visibleを使用するためselect.js is buggy in mobile views, however it is awesome on desktop views.

あり、そうでなければ私は入力Bを使用する

：（768px最小幅）Iは@media場合形式で入力Aを使用しますまたは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

は、使用しようとしているブラウザによっては、ビューポートの幅（IE11 +）を検出するためにはJavaScriptのmatchMedia（）メソッドを使用することができます。また、使用することができます特定のページ幅のコントロール。無効なコントロールは、フォームの送信時にサーバーにポストされません。

すでに発見したように、CSSを隠した後でもDOM内にコントロールが存在するため、これはCSSで簡単に行うことはできません。

注：あなたはおそらく、あなたがなど、ウィンドウのサイズ変更、デバイスの回転に基づいて、それらを再度追加する必要がある場合がありますので、あからさまなDOMからコントロールを削除したくない

テストされていない例：

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

Answer 2

このコードは、関連するHTMLコードを表示/非表示します。純粋なCSSでHTMLコードを削除したい場合、それは不可能です。 CSSはあなたのコンテンツをスタイリングするのに役立つだけで、DOMからそれを削除することはありません。

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

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

あなたは、画面サイズ$(window).width();を見つけると、あなたが得る値に応じて要求された要素を削除するためにjQueryのを使用することができます。あなたは無効にする（jQueryの）を使用しているものは何でもJavaScriptライブラリ

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