Forum Xamarin Xamarin.Forms

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

IrgiIrgi USMember ✭✭
edited September 7 in Xamarin.Forms

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 () {
$("#id_card_inp").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

Best Answer

  • IrgiIrgi USMember ✭✭
    edited September 15 Accepted Answer

    @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<Xamarin.Forms.WebView> 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);   
        }
    }
    

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    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);
        }
    
  • jezhjezh Member, Xamarin Team Xamurai

    Hi @Irgi, have you resolved your question?

  • IrgiIrgi USMember ✭✭
    edited September 15 Accepted Answer

    @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<Xamarin.Forms.WebView> 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);   
        }
    }
    
  • jezhjezh Member, Xamarin Team Xamurai

    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. :)

Sign In or Register to comment.