我希望使我正在开发的网站具有响应能力。我有一个包含 Logo 、搜索栏和其他一些按钮的栏。我想做的是使用媒体查询来隐藏搜索栏移动并用按钮激活它,但我无法让它工作。这是我的表单代码:
function resize() {
if ($(window).width() < 1105) {
alert("Hello World!");
} else {
document.getElementById("formular").submit();
}
}
<form action="cautare-test.php" method="post" id="formular">
<input type="text" name="search" id="bara-cautare" placeholder="Press Enter to search!">
<button id="test" type="button" onclick="resize()"><img src="pictures\buton_cautare.png"></button>
</form>
我的问题是,在宽度大于1105时,表单被提交,但在分辨率低于1105时,按下按钮时没有警告框。提前感谢您的帮助,我真的希望听到其他响应式设计解决方案。
最佳答案
如果添加 jquery,您的代码可以正常工作。也许您忘记添加它或不想使用它。然后,您需要添加 jquery 或将 jquery 方法更改为 vanillaJs window.innerWidth
function resize() {
if (window.innerWidth < 1105) {
alert("Hello World!");
} else {
document.getElementById("formular").submit();
}
}
<form action="cautare-test.php" method="post" id="formular">
<input type="text" name="search" id="bara-cautare" placeholder="Press Enter to search!">
<button id="test" type="button" onclick="resize()"><img src="pictures\buton_cautare.png"></button>
</form>
关于javascript - IF 条件不适用于表单内的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49675065/