无法在移动设备上运行的 HTML 表单

Question

我有一个简单的单字段时事通讯注册表单，其中包含一个输入字段和一个提交按钮。我使用<a> 标记并将onclick 属性设置为javascript 函数，该函数强制对“必填”字段进行HTML5 检查并提交表单。此设置适用于桌面设备，但完全不适用于移动设备，我不确定为什么。

这是我正在使用的精简 HTML 和 JavaScript 文件：

newsletterForm.html

<form action="formSubmit.php" method="POST">

    <label for="emailfield">Email here:</label>
    <input type="text" name="email" id="emailfield" required>

    <input type="submit" name="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px>
    <a onclick="submitform();">Sign up</a>

</form>

handleforms.js

function submitform() {

    document.getElementById('submithandler').click();
}

我使用<a> 标记是因为我想使用不适用于<input type='submit'> 标记的特殊样式，但如果有办法在提交按钮上强制使用样式，那就太好了。

当用户点击按钮或链接时，它应该模拟点击<input type='submit'> 表单元素，以强制对“必填”输入字段进行 HTML5 检查。

什么会阻止此设置在移动设备上运行，我该如何解决？

我愿意接受有关我的代码的批评和批评，我希望向任何愿意教书的人学习。

Answer 1

试试下面的代码就行了

<form action="formSubmit.php" method="POST" id="myform">

<label for="emailfield">Email here:</label>
<input type="text" id="emailfield" required>

<input type="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px>
<a onclick="submitform();">Sign up</a>

</form>


function submitform() {

document.getElementById('myform').submit();
}

Answer 2

您需要将name 属性添加到所有输入字段。否则无法提交表单。

<form action="formSubmit.php" method="POST">

    <label for="emailfield">Email here:</label>
    <input type="text" id="emailfield" required name="emailfield">

    <input type="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px" name="submit">
    <a onclick="submitform();">Sign up</a>

</form>

Answer 3

点击事件在 iOS 和某些手机浏览器上不起作用，您必须使用 touchstart、touchmove 和 touchend 事件来判断用户是否点击了屏幕。

代码：

 <script>
       var tap = true;
       document.addEventListener('touchstart',function(e) {
          tap = true;
       });
       document.addEventListener('touchmove',function(e) {
         tap = false;
       });
       document.addEventListener('touchend',function(e) {
          if(tap) {
             //users tapped the screen
          }
       });
    </script>

类似的东西

Answer 4

这些不是 HTML 表单的有效用途。我们应该根据它们的标准行为来使用它们。

使用 onsubmit 属性而不是绑定点击事件。这也将像设备中的魅力一样发挥作用。只需确保您已将 type="submit" 写入提交按钮即可。

<form action="formSubmit.php" onsubmit="myFunction()">
   Enter name: <input type="text" name="fname">
   <input type="submit" value="Submit">
</form>

<script>
  function myFunction() {
    alert("The form was submitted");
  }
</script>

Answer 5

试试下面给出的代码：

它还将禁止点击移动设备上的表单提交

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="formSubmit.php" method="POST">
<label for="emailfield">Email here:</label>
<input type="text" id="emailfield" required>
<input type="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px;">
<a id="Submit_Form" style="cursor: pointer;">Sign up</a>
</form>
<script>
$( document ).ready(function() {
    $('#Submit_Form').on("click",function(){
     var isMobile = window.matchMedia("only screen and (max-width: 760px)");
     if (isMobile.matches) 
     {
         $('#submithandler').prop('disabled', true);
     }
     else
     {
         $('#submithandler').click();
     }
  }); 
});
</script>

有一个内置的 JavaScript API 用于检测媒体。以下几行适用于平板电脑和手机屏幕，它将禁用点击手机和平板电脑上的提交按钮：

var isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (isMobile.matches) 
{
$('#submithandler').prop('disabled', true);
}

希望这个答案对你有帮助！