我有一个表格。如果@media (min-width: 768px),我想在表单中使用输入 A,否则我想使用输入 B。
我需要切换输入的原因是因为 select.js is buggy in mobile views, however it is awesome on desktop views.
将xs-hidden 和xs-visible
与bootstrap 一起使用或使用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;
}
}
最佳答案
根据您尝试使用的浏览器,您可以使用 javascript 的 matchMedia() 方法来检测视口(viewport)的宽度 (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 );
}
});
关于javascript - 根据@media 宽度大小在表单中的不同输入之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39234293/