携帯端末でHTMLフォームが機能していない

Question

私は単純な単一フィールドのニュースレターのサインアップフォームを1つの入力フィールドと送信ボタンがあります。私はタグを使用して、onclickプロパティをjavacript関数に設定して、 '必須'フィールドのHTML5チェックを強制してフォームを送信します。この設定はデスクトップではうまくいきますが、モバイルデバイスではまったく動作しません。その理由はわかりません。

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>タグを使用していた。ここで

は、私が使用しているストリップダウンHTMLとJavaScriptファイルであります <input type='submit'>タグを使用していないスタイリング。ただし、送信bにスタイルを強制する方法がある場合utton、それはいいだろう。

ユーザーがボタンまたはリンクをクリックすると、「必須」入力フィールドのHTML5チェックを強制するために、<input type='submit'>フォーム要素のクリックをエミュレートする必要があります。モバイルとどのように私はそれを修正することができに機能してからこの設定を妨げる何

？私は私のコードについての批判やコメントに開いている

は、私が教えて喜んで誰からも学ぶことを願っています。

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

下記のトライコード：

また、フォームの無効クリックすると、モバイルデバイス上で

<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>