Question

使用webview加载简单的html表单，表单显示正常。单击输入字段时，整个表单将消失，在显示屏的底部显示向上和向下箭头和完成按钮。在普通的Chrome浏览器中不会发生此问题。任何idéas？

祝你好运安德烈亚斯

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

Answer 1

奇怪，所以我使用你的HTML代码创建了一个网页，然后创建了一个新的Xamarin.Forms解决方案，其中WebView指向我从HTML创建的页面。当我单击任何输入字段时，软键盘显示为预期。但是，如果我确定WebView位于屏幕底部，键盘显示的位置，键盘会隐藏WebView。要解决此问题，您需要一个自定义页面渲染器[1]以在键盘显示时向上滚动视图，并在键盘消失时向下滚动视图。

以下是一些示例代码。我假设您只想在具有WebView的页面上执行此操作，因此首先在Forms PCL项目中创建一个名为ContentPage的{{1}}的空子类：

WebViewContentPage

然后，您从public class WebViewContentPage : ContentPage {}继承了WebViewContentPage的实际页面，在我的测试中，我将其称为WebView：

TestWebInputPage

我的Xaml是（将UrlToWebPageHere更改为您网页的实际网址）：

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

最后是自定义页面渲染器代码。这适用于iOS应用程序项目：

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

由于此渲染器实际上在键盘显示和隐藏时向上和向下滚动整个本机页面，因此无论您如何在Forms Xaml中布局页面都无关紧要。重要的是您的表单页面继承自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(); } } }。

我希望这有帮助！

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

单击文本框时，带有表单的Xamarin Webview会滚出视图

1 个答案: