在移动设备中，隐藏输入并避免提交

Question

早上好，

我有一个表单，我需要通过选择输入字段。 为了简化用户选择，我使用了输入和数据列表，作为选择选择器工作，但运行更流畅、更快。

由于移动中的javascript不起作用，我决定创建一个普通的选择，通过使用CSS媒体规则，它只显示在移动设备上，而以前的数据列表只显示在更大的屏幕上。

问题是：由于我需要来自其中一个输入的数据，因此两者都具有所需的属性。但是用显示隐藏它：没有显然不会"删除"所需的内容。

归根结底，我问是否有办法仅在移动设备中"删除"所需的属性，最好是通过 CSS。

这是 HTML：

<div class="col-md-6">
<div class="form-group"> 
<label for="anagrafica"> Cliente :</label>
<!--visualizzabile sono in pc (non funziona su mobile)-->
<div class="onlyOnPC">
<input type="text" class="form-control" name="anagrafica" list="anagrafica" required/>
<datalist id="anagrafica">
//list of options
</datalist>
</div>

<div class="onlyOnMobile">
<select name="anagrafica" id="anagrafica" class="form-control" required>
<option value=""></option>
//list of options
</select>
</div>
</div>
</div>

这是 CSS：

@media only screen and (max-width: 600px) {  
.onlyOnPC{
display: none;
}
.onlyOnMobile{
display: block;
}
}@media only screen and (min-width: 601px) {  
.onlyOnPC{
display: block;
}
.onlyOnMobile{
display: none;
}
}

谢谢

Answer 1

看看这个

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width < 768) {
$("input").attr("required", "false");
} else {
$("input").attr("required", "true");
}