locked
How to give focus to a HTML element in hybrid webview page on load? RRS feed

  • Question

  • User284305 posted

    Hi all, I have a hybrid Xamarin Forms webview which loads an html page from a string. Only thing I could not get to work is to give focus to an input field in the HTML page at startup.

    I use the javascript:

    window.onload = function () {
    $("#idcardinp").focus(); };

    Also tried with jQuery $(document).ready, but the issue still remains. This works fine loading the HTML in a Browser, but does not work loading the code into a Webview.

    Any idea how to get this done?

    Thanks, Stephan

    Monday, September 7, 2020 5:18 PM

Answers

  • User284305 posted

    @jezh Fixed it using the information I found here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview

    My solution for UWP: public class WebViewRender : WebViewRenderer { ///

    /// on element change /// /// arguments of event protected override void OnElementChanged(ElementChangedEventArgs e) { base.OnElementChanged(e); var webView = e.NewElement as WebViewer; if (webView != null) { webView.EvaluateJavascript = async (js) => { var ret = String.Empty; try { ret = await Control.InvokeScriptAsync("eval", new[] { js }); } catch { }

                    return ret;
                };
    
                Control.NavigationCompleted += Control_NavigationCompleted;
            }
    
    
    
        }
    
        private void Control_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            Control.Focus(Windows.UI.Xaml.FocusState.Pointer);   
        }
    }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, September 15, 2020 11:49 AM

All replies

  • User371688 posted

    For this, you can try to use method WebView.EvaluateJavaScriptAsync to invoke JavaScript in xamarin forms.

    For more details, you can refer to the official document: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows#invoking-javascript

    And if that doesn't work, you can customize a WebView by using webviewrenderer, and then inject the javascript in the onPageFinish method.

    public override void OnPageFinished(WebView view, string url) { base.OnPageFinished(view, url); view.EvaluateJavascript(_javascript, null); }

    Tuesday, September 8, 2020 7:45 AM
  • User371688 posted

    Hi @Irgi, have you resolved your question?

    Tuesday, September 15, 2020 8:24 AM
  • User284305 posted

    @jezh Fixed it using the information I found here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview

    My solution for UWP: public class WebViewRender : WebViewRenderer { ///

    /// on element change /// /// arguments of event protected override void OnElementChanged(ElementChangedEventArgs e) { base.OnElementChanged(e); var webView = e.NewElement as WebViewer; if (webView != null) { webView.EvaluateJavascript = async (js) => { var ret = String.Empty; try { ret = await Control.InvokeScriptAsync("eval", new[] { js }); } catch { }

                    return ret;
                };
    
                Control.NavigationCompleted += Control_NavigationCompleted;
            }
    
    
    
        }
    
        private void Control_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            Control.Focus(Windows.UI.Xaml.FocusState.Pointer);   
        }
    }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, September 15, 2020 11:49 AM
  • User371688 posted

    Congrats, and thanks for your sharing the answer.

    Could you please mark this thread as answered so that others who have similar questions will get help from this thread? Thanks in advance. :)

    Wednesday, September 16, 2020 1:29 AM