Question

我有一个简单的单字段简报注册表单，其中包含一个输入字段和一个提交按钮。我使用<a>标记，并将onclick属性设置为javascript函数，强制HTML5检查所需的＆＃39;字段并提交表单。此设置适用于桌面，但在移动设备上并不起作用，我不确定原因。

以下是我使用的精简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检查所需的＆＃39;输入字段。

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

我对我的代码提出批评和评论，我希望向愿意教的人学习。

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

希望这个答案能帮到你！

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

5 个答案: