如何使用 display:none 启用所需的输入？

【问题标题】：How to enable required an input with display:none?如何使用 display:none 启用所需的输入？
【发布时间】：2017-10-27 21:03:15
【问题描述】：

我想在“文件”类型的输入中显示“必需”警报，这是隐藏的（显示：无），因为它必须具有特定的样式，并且此样式应用于其相应的标签。下面是一个例子：

<label for="add-photo-input" id="add-photo">Adjuntar Foto</label>
<input id="add-photo-input" type="file" required name="add-photo-input" style="display: none;">

【问题讨论】：

您可以随时检查输入字段是否有任何值。基于此，您可以显示适当的消息。
不要使用 display:none，使用 opacity:0
@ScottMarcus，非常感谢，我用你的建议解决了问题

标签： javascript html css

【解决方案1】：

你可以使用 JavaScript。

<script>
function check() {
    var x = document.getElementById("add-photo-input").value;
    if (x == "") {
        document.getElementById("add-photo").style="border:.1em solid blue";
        alert("Please add photo");
        return false;
    }
} function reset() {
    document.getElementById("add-photo").style="border:none";
}
</script>

并确保在单击提交按钮时调用检查函数：

<label for="add-photo-input" id="add-photo" onclick="reset()">Adjuntar Foto</label>
<input id="add-photo-input" type="file" required name="add-photo-input" style="display:none">
<input onclick="check()" id="submit" type="submit" />

了解更多信息会很有帮助，您是否有理由无法更改文件输入元素的样式以匹配您想要的样式？

【讨论】：