XamarinフォームによるWebviewは、テキストボックスをクリックすると表示外にスクロールします

webviewを使用して簡単なhtmlフォームを読み込むと、フォームはokと表示されます。入力フィールドをクリックするとフォーム全体が消え、上下に矢印が表示され、終了ボタンが表示の下部に表示されます。この現象は、通常のChromeブラウザでは発生しません。何か案は？XamarinフォームによるWebviewは、テキストボックスをクリックすると表示外にスクロールします

敬具アンドレアス

XAML：

  <WebView Grid.Row="0" IsEnabled="false" 
        x:Name="webview" 
       Navigating="webViewNavigating"></WebView> 

     </Grid> 
    </ContentPage.Content> 
     <ContentPage.ToolbarItems> 
    <ToolbarItem Text="Byt Betalsätt" Activated="BtnBack_Clicked" Priority="0" Order="Primary" /> 
</ContentPage.ToolbarItems> 

</ContentPage>

HTML：

<!-- New section --> 
    <script type="text/javascript"> 
    // Fill in your publishable key 
    Stripe.setPublishableKey('pk_test_1GitP47uZiwo4PKrDDSo8P3X'); 

    var stripeResponseHandler = function(status, response) { 
     var $form = $('#payment-form'); 

     if (response.error) { 
     // Show the errors on the form 
     $form.find('.payment-errors').text(response.error.message); 
     $form.find('button').prop('disabled', false); 
     } else { 
     // token contains id, last4, and card type 
     var token = response.id; 
     // Insert the token into the form so it gets submitted to the server 
     $form.append($('<input type="hidden" name="stripeToken" />').val(token)); 
     // and re-submit 
     $form.get(0).submit(); 
     } 
    }; 

    jQuery(function($) { 
     $('#payment-form').submit(function(e) { 
     var $form = $(this); 

     // Disable the submit button to prevent repeated clicks 
     $form.find('button').prop('disabled', true); 

     Stripe.card.createToken($form, stripeResponseHandler); 

     // Prevent the form from submitting with the default action 
     return false; 
     }); 
    }); 
    </script> 
</head> 

<body> 
<form action="/your-charge-code" method="POST" id="payment-form"> 
    <span class="payment-errors"></span> 

    <div class="form-row"> 
    <label> 
     <span>Card Number</span> 
     <input type="text" size="20" data-stripe="number"> 
    </label> 
    </div> 

    <div class="form-row"> 
    <label> 
     <span>Expiration (MM/YY)</span> 
     <input type="text" size="2" data-stripe="exp_month"> 
    </label> 
    <span>/</span> 
    <input type="text" size="2" data-stripe="exp_year"> 
    </div> 

    <div class="form-row"> 
    <label> 
     <span>CVC</span> 
     <input type="text" size="4" data-stripe="cvc"> 
    </label> 
    </div> 

    <div class="form-row"> 
    <label> 
     <span>Billing Postal Code</span> 
     <input type="text" size="6" data-stripe="address_zip"> 
    </label> 
    </div> 

    <input type="submit" class="submit" value="Submit Payment"> 
</form> 

</body>

出典

2016-12-20 90hex

Webviewがグリッド内にある理由を尋ねることはできますか？あなたはそれをグリッドから取り出して、変化があるかどうか確認できますか？ IsEnabled = "false"は大文字と小文字が区別され、XAMLはそれを気に入らないかもしれません。IsEnabled = "False"（Capital f）に変更してください – stepheaw

どのプラットフォームですか？ iOS？アンドロイド？どちらも？入力要素をクリックすると、キーボードが表示され、フォームフィールド間を移動する矢印ボタンと、キーボードを閉じるための完了ボタンが表示されます。入力フィールドをクリックするとフルキーボードが表示されますか？ – jgoldberger

stepheaw：問題を修正しようとするだけです.Gridなしで同じ結果が得られ、IsEnabled属性を削除すると同じ結果になります。 – 90hex

奇妙なので、HTMLコードを使用してWebページを作成した後、HTMLから作成したページを指すWebViewという新しいXamarin.Formsソリューションを作成しました。入力フィールドのいずれかをクリックすると、ソフトキーボードが期待どおりに表示されました。しかし、WebViewが画面の最下部にあることを確認した場合、キーボードにはWebViewが隠れています。これを修正するには、キーボードが表示されたときにビューをスクロールし、キーボードが消えたときにビューを元に戻すカスタムページレンダラー[1]が必要です。

これを行うためのサンプルコードを示します。そして、あなたは、実際のページのWebViewContentPageから継承

public class WebViewContentPage : ContentPage {}

：私はあなただけなので、最初のフォームPCLのプロジェクトにWebViewContentPageと呼ばれるContentPageの空のサブクラスを作成し、WebViewことを持っているページ上でこれを実行したいと仮定しますWebViewは、私のテストでは、私はTestWebInputPageそれを呼び出した：

public partial class TestWebInputPage : WebViewContentPage 
{ 
    public TestWebInputPage() 
    { 
     InitializeComponent(); 
    } 
}

私のXAMLは、（あなたのWebページの実際のURLにUrlToWebPageHereを変更）です：

<?xml version="1.0" encoding="utf-8"?> 
<local:WebViewContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestWebInput" x:Class="TestWebInput.TestWebInputPage"> 
    <StackLayout> 
     <Label 
      Text="Take up space" 
      HeightRequest="400" /> 
     <WebView 
      x:Name="webView" 
      Navigating="Handle_Navigating" 
      Source="UrlToWebPageHere" 
      VerticalOptions="FillAndExpand" /> 
    </StackLayout> 
</local:WebViewContentPage>

最後にカスタムページレンダラコード。これは、iOSアプリのプロジェクトに行く：

using System; 
using Xamarin.Forms; 
using TestWebInput.iOS; 
using Xamarin.Forms.Platform.iOS; 
using Foundation; 
using UIKit; 
using TestWebInput; 

[assembly: ExportRenderer(typeof(WebViewContentPage), typeof(ContentPageRenderer))] 
namespace TestWebInput.iOS 
{ 
    public class ContentPageRenderer : PageRenderer 
    { 
     private NSObject keyBoardWillShow; 
     private NSObject keyBoardWillHide; 
     private nfloat scrollAmout; 
     private double animDuration; 
     private UIViewAnimationCurve animCurve; 
     private bool keyboardShowing; 

     public override void ViewDidLoad() 
     { 

      base.ViewDidLoad(); 

      keyBoardWillShow = UIKeyboard.Notifications.ObserveWillShow(KeyboardWillShow); 

      keyBoardWillHide = UIKeyboard.Notifications.ObserveWillHide(KeyboardWillHide); 
     } 

     void KeyboardWillShow(object sender, UIKeyboardEventArgs args) 
     { 
      if (!keyboardShowing) 
      { 
       keyboardShowing = true; 
       animDuration = args.AnimationDuration; 
       animCurve = args.AnimationCurve; 

       var r = UIKeyboard.FrameBeginFromNotification(args.Notification); 
       scrollAmout = r.Height; 
       ScrollTheView(true); 
      } 
     } 

     void KeyboardWillHide(object sender, UIKeyboardEventArgs args) 
     { 
      if (keyboardShowing) 
      { 
       keyboardShowing = false; 
       animDuration = args.AnimationDuration; 
       animCurve = args.AnimationCurve; 

       var r = UIKeyboard.FrameBeginFromNotification(args.Notification); 
       scrollAmout = r.Height; 
       ScrollTheView(false); 
      } 
     } 

     private void ScrollTheView(bool scale) 
     { 
      UIView.BeginAnimations(string.Empty, IntPtr.Zero); 
      UIView.SetAnimationDuration(animDuration); 
      UIView.SetAnimationCurve(animCurve); 

      var frame = View.Frame; 

      if (scale) 
       frame.Y -= scrollAmout; 
      else 
       frame.Y += scrollAmout; 
      View.Frame = frame; 
      UIView.CommitAnimations(); 
     } 
    } 
}

このレンダラーは、実際に全体のネイティブページアップをスクロールしたときに、キーボードショーや皮革を下にバックアップするので、あなたがフォームXAMLでページをレイアウトする方法は問題ないはず。重要なことは、フォームページがWebViewContentPageから継承されていることです。

こちらがお役に立てば幸いです。

[1] https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/contentpage/

出典

2016-12-21 23:06:38 jgoldberger

これは進歩しています、時間を取ってくれてありがとう、今夜試してみよう、 – 90hex

それはまだ動いています。ラベル。ありがとう！ – 90hex

XamarinフォームによるWebviewは、テキストボックスをクリックすると表示外にスクロールします

答えて

関連する問題