根据@media width size在表单中的不同输入之间切换
根据@media width size在表单中的不同输入之间切换
提问于 2016-08-30 18:06:08
我有一张表格。我想以if @media (min-width: 768px)的形式使用输入A，否则我想使用输入B。
我需要切换输入的原因是因为select.js is buggy in mobile views, however it is awesome on desktop views.
使用带bootstrap的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;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-30 18:23:40
根据您尝试使用的浏览器，您可以使用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 );
}
});Stack Overflow用户
发布于 2016-08-30 18:13:23
这段代码将显示/隐藏相关的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>
您可以使用JQuery来找出屏幕大小$( window ).width();，并根据您获得的值删除请求的元素。
$(document).ready(function() {
if (( window ).width() > 767){
$('.tag-sm').remove();
}
else{
$('.tag-lg').remove();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39234293
复制相关文章
![[android] 在不同的activity之间传递数据](https://ask.qcloudimg.com/http-save/yehe-2504969/76t56twftw.png)
点击加载更多
相似问题
在不同的表单之间切换
使用无线输入在部分表单之间切换
bounds.size.width与bounds.width在between中的区别？
在表单之间切换
在表单之间切换
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
