更改 480 宽度 Javascript 的按钮 URL

Question

如果他们在 480 宽度或更小的移动屏幕上，我想在他们点击提交时更改按钮的 url。

例子：

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

但在宽度为 480 或以下的移动设备上，我希望将其更改为：

<form name="myform1" action="mylink-mobile.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

该页面是 PHP 但我想我可以使用 javascript screen.width 来检测

Answer 1

如果没有 JavaScript，您可以使用 CSS 媒体来显示和隐藏不同的表单。

form[name="myform1"] {
    display: block;  
}

form[name="myform2"] {
    display: none;  
}


@media (max-width: 400px) {

  form[name="myform1"] {
    display: none;  
  }

  form[name="myform2"] {
    display: block;  
  }
  
}

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

<form name="myform2" action="mylink-mobile.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

如果你想用JavaScript改变动作，你想read the window size

Answer 2

您可以完全不使用 JavaScript。

<form name="myform1" class="wide sense" action="mylink.php" method="post"> 
  <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>
<form name="myform1" class="narrow sense" action="mylink-mobile.php" method="post"> 
  <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

包括 both 具有不同 class 值的表单。然后在你的 CSS 中：

form.sense { display: none; }
@media screen and (min-width: 481px) {
  form.sense.wide { display: block; }
}
@media screen and (max-width: 480px) {
  form.sense.narrow { display: block; }
}

当用户从纵向转到横向时，您无需通过 JavaScript 监控方向或屏幕几何形状，这将起作用。

Answer 3

HTML

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

JS

window.onload = function (){
if (window.innerWidth <= "480")
document.getElementsByTagName("form")[0].setAttribute("action", "mylink-mobile.php");
}

Answer 4

我们的想法是检测他们是否在移动设备上并采取相应措施，对吗？毕竟，您正在更改表单提交操作，所以我假设幕后正在发生一些不同的事情。

也就是说，我会使用移动设备检测而不是使用屏幕尺寸。有关更多信息，请参阅此线程（忽略“jquery”部分，因为提供的信息也包含非 jquery 解决方案）：What is the best way to detect a mobile device in jQuery?

大多数人似乎使用用户代理检测来确定您是否使用类似这样的移动设备：

if (navigator.userAgent.match(/Mobi/)) {
    // mobile!
}

Answer 5

您可以定义两个具有不同value 属性的提交按钮

<form action="action.php" method="post"> 
   ...
   <input type="submit" name="submit" value="480" />
   <input type="submit" name="submit" value="over480" />
</form> 

您只显示一个输入，具体取决于视口大小

CSS

[value="480"] { display: none; }
[value="over480"] { display: block; }

@media all and (max-width: 480px) {
    [value="480"] { display: block; }
    [value="over480"] { display: none; }
}

然后在 action.php 检查哪个实际提交了您的表单，并根据通过 POST 发送的参数应用不同的服务器端逻辑。

优点：

• 无需复制表单的标记
• 无需使用javascript来检测视口的大小变化
• 服务器端逻辑位于一个入口点

---

示例（github 要点）：
https://gist.github.com/anonymous/64b9e1d42c00356f5874