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

我有一个简单的单字段新闻简报注册表单，其中包含一个输入字段和一个提交按钮。我使用<a>标记，并将onclick属性设置为一个JavaScript函数，该函数强制执行“必填”字段的HTML5检查并提交表单。此设置适用于桌面，但对移动设备完全不起作用，我不确定为什么。HTML表单无法在移动设备上运行

这里是剥夺了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检查。

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

我很乐意接受有关我的代码的评论和评论，我希望向任何愿意教导的人学习。

来源

2017-01-03 SuperContraptionGuy

尝试下面的代码，将工作

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

来源

2017-01-03 05:36:27

你能提供它的工作原理吗？不仅是答案。 Thx – Elec

如果用户触发点击事件，它肯定会起作用，但如果脚本触发点击事件，它可能无法在所有情况下工作，因为某些浏览器会想到脚本中的蠕虫和病毒，并且不会触发处理程序。而且在Jquery中也是$（elem）.click（）;不会保证但是$（elem）.trigger（“click”）;将在某些情况下工作。 –

我主要关心的是$（elem）.submit（）不会触发HTML5自动处理必填字段。你知道这可以做到吗？ – SuperContraptionGuy

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>

沿着这

来源

2017-01-03 06:05:27 digit

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

来源

2017-01-03 06:19:48 Krunal

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

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

来源

2017-01-03 06:23:24

因此，当我读取代码时，如果检测到移动设备，它将禁用''标签和其他明智的（如果它是桌面设备）它将模拟点击< input type =“submit”>'标记并提交表单。如果它是移动设备，表单如何提交？ – SuperContraptionGuy

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

来源

2017-01-03 06:24:33

我的原始代码在所有的''标签上都设置了'name'属性，它工作正常。主要问题仍然存在。 – SuperContraptionGuy

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

回答

相关问题