web-dev-qa-db-ja.com

iPad / iPhoneの[移動]ボタンがフォームを投稿しないようにするにはどうすればよいですか

IPadを使用して表示される動的フォームがあります。

このフォームには、いくつかのラジオボタンといくつかのテキストフィールド、および1つの送信ボタンがあります。

IPadでは、仮想キーボードのGOボタンがEnterキーを押して機能することになっているため、フォームの最初の送信ボタンがクリックされ、フォームが投稿されます。

フォームが完成する前に過度の不本意な投稿を避けるために、フォームの上部に追加の送信ボタンを追加しました。これは、onclick = "returnfalse;"で表示領域の外側に完全に配置されています。これにより、Enterキーストロークがハイジャックされ、SafariMobileを除くすべてのブラウザでの誤った投稿が防止されます。

IPadでは、Opera mobileもテストしましたが、期待どおりに機能します。

しかし、Safari Mobileは、ボタンをクリックしたイベントが他のブラウザでは発生しない投稿を引き起こし、PCのサファリでさえも発生しないため、falseの戻りを明らかに無視します。

私の質問は

1：サファリモバイルが送信時に「returnfalse」を無視するのはなぜですか？ここで他のメカニズムが機能していますか？

2：[GO]をクリックしたときにSafari mobileがフォームを投稿しないようにするにはどうすればよいですか？

私はGoogleとStackoverflowで何度も検索を行い、多くの例を見つけましたが、すべてに多くのJavaScriptとイベントのバインドが必要であり、フォームの動的な性質とユーザー生成コンテンツにより、ほとんどすべての必要なバインドイベントがtextboxとtextarea。

オートコンプリートイベントや検証イベントと競合する可能性のあるフォームやイベントをあまりカスタマイズする必要がない場合は特に、機能するソリューションはどれも優れていますが、シンプルな方が優れています。

テストページの例： http://lab.dnet.nu/ipad.php

formsipadmobilesafarisubmit
21
David Mårtensson

私は自分の問題の解決策を見つけました。

問題の根本は、Safarimobileがボタンのonsubmit = "return false"を無視し、フォームでのみ機能することです。

Onsubmit = "returnfalse;"を設定しますフォーム上で、通常のボタン（送信ではない）を作成し、onclick = "form.submit（）"を設定します。

例.

_<form method="post" onsubmit="return false;">
    ... //Other fields here

    <input type="button" value="Send" onclick="form.submit();" />
</form>
_

[移動]ボタンは通常のボタンをトリガーせず、送信ボタンのみをトリガーします。フォームには_onsubmit="return false;"_があるため、投稿されません。

一方、ボタンをクリックすると、onclick="form.submit();"がトリガーされ、フォームのonsubmitが上書きされます。

このソリューションは、どのブラウザでも確実に機能するようです。

29
David Mårtensson

より良い答えはこれです。もう1つは、通常の送信ボタンを使用することを許可していません。これは移動ボタンだけを攻撃します。

$("body").keydown(function(){
    if(event.keyCode == 13) {
        document.activeElement.blur();
        return false;
    }
});
7
Tim Ho

これは基本的に一般的なUXと予想されるデバイスの動作を損なうため、非常に型破りなようです。

ただし、このソリューションは実際の<form>DOM要素に依存していることにも言及することが重要だと思います。つまり、ボタンのonclickハンドラーは、送信にjQueryオブジェクトを使用するのではなく、DOM要素を使用する必要があります。

jQueryオブジェクト。動作しません：

<input type="button" value="Send" onclick="$("#myform").submit();" />

DOM要素。作品：

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />

jQueryなし。作品：

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />

また、これは同様のアプローチであり、jQueryを使用してキーボードの送信をインターセプトし、ボタンのクリックのみを許可します。クレジットは@leviに送られます： http://jsfiddle.net/RsKc7/

0
Patrik Affentranger

コメントできないので、新しいメッセージを入れなければなりません。

「入力タイプボタン」を使用している場合、@ Davidソリューションは正常に機能します。代わりにボタンタグを使用している場合、Davidの修正では解決されないようです。

（env：cordova、ipad mini 2）

ありがとうデビッド！

0
Simone Campagna

私のように誰かがこの問題を追いかけてしまった場合に備えて、追加の回答があります。

JQueryを使用している場合、次のスニペットは「実行」ボタンがフォーム送信をトリガーしないようにする必要があります（少なくとも、Nexus7のChrome on Android = 4.2.2; YMMMV）。また、「Enter」キーが以下の入力タイプのいずれかで機能することを許可する場合は、これが発生しないようにすることに注意してください。

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',     
    function (e) { 
        // Android maps the "Go" button to the Enter key => key code 13
        if (e.keyCode == 13) {
            return false; 
        }
    });

編集：そうです このバグkeyup/keydown in Chrome in Android> 4.3。この場合、この修正は状況によっては機能しなくなります。

0
ajm