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'>标签无法合作，但如果在提交b时强制样式utton，那很好。

当用户单击按钮或链接时，它应该模仿<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

Click事件不会对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 3

这些东西线不是一个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 4

try代码：

它也将禁用形式的点击移动设备上的

<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); 
} 

希望这个答案可以帮助你！

Answer 5

您需要将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>