2012-03-05 10 views
2

iOSでは、ウェブページ上のフォームに記入する際に、実際のキーボードのタブキーのように機能するキーボードの次と前ボタンがあります。私たちはPhoneGapを使ってアプリケーションとして実装したWebアプリケーションを持っています.NextとPreviousボタンは過去のチェックボックスをスキップします。iOS上のチェックボックスで前/次のボタンを有効にする

iOSのPhoneGap/UIWebView/Safariを使用して[次へ]ボタンと[前へ]ボタンのチェックボックスを使用する方法はありますか?

+0

私はウェブ上のアプリケーションで同じ問題を抱えています。私はPhoneGapを使用していません。あなたはこの問題を解決しましたか? –

+0

@ JosiahSprague基本的には、「AppleがUIWebViewコントロールを修正するまで待つ」以外に、これに対する解決策はありません。また、私は後で顧客が嘘をついていることを知った、それはウェブサイトのバージョンで働いたことはない。 – joshuahealy

+0

編集した質問は、情報の一部が間違っていたことがわかりました – joshuahealy

答えて

2

これは、HTMLだけを使用してシミュレートすることができます。

チェックボックスの直前にテキスト入力要素を挿入します。 JavaScriptを追加します。その入力にフォーカスがあるときにキーを押すと、チェックボックスの状態が変わります。

a jsbin exampleedit the sourceです。この例についての注意事項:

  • <fieldset>を使用していない - jsbinの編集モードでのiOS 6の入力力は、クローズの長いタッチを使用してテキストを選択する(jsbinコードやIFRAMEとの何らかの相互作用でなければならない)、およびキャレットを常に隠します(この状況では便利ですが、そうではありません)。 Safariのバグが悪いので私のように見えます(しかし、あまり目立たないので、実際には見ていませんでした。)ユーザーがオプションをタッチすると、キーボードは非表示になります。

  • 集中したチェックボックスに使用するスタイルを見つけるのに多大な時間を費やすことはありませんでした。

  • 点滅しているキャレットを隠すことができないアイデアについては、jsbinの例にいくつかの不具合があります。キャレットを隠すための巧妙な解決策があるなら、私は興味があります。

  • iOSデバイスのみにこの修正を適用するには、ブラウザを盗聴する必要があります。

  • これは標準のiOS UIの動作ではないため、他のアプリに行くときにユーザーを混乱させる可能性があります。モバイルSafariの将来のリリースで、このソリューションが簡単に壊れる可能性があります。

  • キャレットを隠す方法をいくつか試しましたが、最も効果的なのは-webkit-transform: scale(0.01); transform: scale(0.01);です。 font-sizeを使う:1px;ほとんど動作しますが、入力がフォーカスになるとiPhoneがズームします(テストされたiPad iOS5、ズームされていない、iPhone iOS6がテストされズームされている)。

+1

これは実行可能な回避策ですが、私たちが思いついた解決策は、デバイスのデフォルトの動作とは異なることは悪い考えでした。 – joshuahealy

+0

Androidでも動作するにはいくつかの変更が必要です。特に、入力のpxの高さが小さい(2ピクセルが機能しない)場合、キーボードのキャプチャはkeypressではなく、keypownにする必要があります(http://jsbin.com/ulapab/2を参照)。 – robocat

0

短い答えは「それは機能です」です。アップル社はチェックボックスを切り替えるためにどのボタンを押す必要があるのか​​混乱させたくないからだ。

関連する問題