locked
How to programmatically add text to a textbox inside webview html?

    Question

  • I have a webview displaying html page for javascript purposes. There is a textbox inside the html. I would like to programmatically add text to where the caret is in a textbox inside the webview. Is this possible?

    What I'm doing is I'm creating an equation editor using latex.  I'm trying to make this as user friendly as possible, so instead of making the user learn latex, I'll have buttons with popups showing gridviews of things like \frac{}{} for fraction, etc.  and also greek letters and other math symbols.

    Thursday, December 25, 2014 12:52 AM

Answers

  • Through trial and error, I've figured out how to control an element in html inside the webview without injecting script and reloading the html.   My problem with the injecting script into the html and reload it is I'm running scripts that are 10-15mb in size.  So, every time I reload the html, it takes like 30 seconds to run the scripts. This is simply unacceptable as my users would have to wait 20-30 seconds every time they want to update something.

    Here is how you pass a string to an input element inside the loaded html.

    Say you have the following in the html.

    <html>
    <head>
    <title>Example</title>
    
    
    function changetext(incoming) {
    
            Input.value = incoming;
    
        }
    </script>
    
    
    </head>
    <body>
    <input id = 'Input'/>
    </body>
    </html>

    On the c# side of things...

    private async void ChangeText()
            
                    await webView5.InvokeScriptAsync("changetext", new string[] { "hooga booga" });
               
            }
    PS - I highly recommend Matt Small to add this into his article about webview.  I searched everywhere on the internet and couldn't find a single example that doesn't have a "null" inside the 2nd argument of InvokeScriptAsync.


    • Marked as answer by RandyPete Friday, December 26, 2014 6:53 PM
    • Edited by RandyPete Friday, December 26, 2014 6:55 PM
    Friday, December 26, 2014 6:53 PM

All replies

  • Hi RandyPete,

    Yes, we can use script inject to edit the textbox value in WebView control. Matt small has posted a blog with code snippet about this topic. Please see them.

    http://blogs.msdn.com/b/wsdevsol/archive/2012/10/18/nine-things-you-need-to-know-about-webview.aspx.

    http://blogs.msdn.com/b/wsdevsol/archive/2014/04/03/ten-things-you-need-to-know-about-webview-_2d00_-an-update-for-windows-8.1.aspx#AN6.

    Let me know if you have any concerns.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Friday, December 26, 2014 2:19 AM
    Moderator
  • Hi RandyPete,

    Yes, we can use script inject to edit the textbox value in WebView control. Matt small has posted a blog with code snippet about this topic. Please see them.

    http://blogs.msdn.com/b/wsdevsol/archive/2012/10/18/nine-things-you-need-to-know-about-webview.aspx.

    http://blogs.msdn.com/b/wsdevsol/archive/2014/04/03/ten-things-you-need-to-know-about-webview-_2d00_-an-update-for-windows-8.1.aspx#AN6.

    Let me know if you have any concerns.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Thank you for your reply.

    Let me rephrase the question. How do I use the invokescript method to pass a string to a function within the javascript without injecting a script every time?  Invokescript takes 2 arguments, yes?  The first is the function's name.  Can I pass the string through the 2nd argument?

    Added by edit.

    The reason injecting script using the method in your link won't work for me is I'm running 10mb worth of .js files, which has a delay time every time I reload.

    That method simply won't work for what I'm trying to do.

    Added by further edit.

    All I want to do is pass a string from c# into input element as its value in the html in webview.

    • Edited by RandyPete Friday, December 26, 2014 9:03 AM
    Friday, December 26, 2014 7:39 AM
  • Through trial and error, I've figured out how to control an element in html inside the webview without injecting script and reloading the html.   My problem with the injecting script into the html and reload it is I'm running scripts that are 10-15mb in size.  So, every time I reload the html, it takes like 30 seconds to run the scripts. This is simply unacceptable as my users would have to wait 20-30 seconds every time they want to update something.

    Here is how you pass a string to an input element inside the loaded html.

    Say you have the following in the html.

    <html>
    <head>
    <title>Example</title>
    
    
    function changetext(incoming) {
    
            Input.value = incoming;
    
        }
    </script>
    
    
    </head>
    <body>
    <input id = 'Input'/>
    </body>
    </html>

    On the c# side of things...

    private async void ChangeText()
            
                    await webView5.InvokeScriptAsync("changetext", new string[] { "hooga booga" });
               
            }
    PS - I highly recommend Matt Small to add this into his article about webview.  I searched everywhere on the internet and couldn't find a single example that doesn't have a "null" inside the 2nd argument of InvokeScriptAsync.


    • Marked as answer by RandyPete Friday, December 26, 2014 6:53 PM
    • Edited by RandyPete Friday, December 26, 2014 6:55 PM
    Friday, December 26, 2014 6:53 PM
  • You mean like this? http://blogs.msdn.com/b/wsdevsol/archive/2014/04/03/ten-things-you-need-to-know-about-webview-_2d00_-an-update-for-windows-8.1.aspx?wa=wsignin1.0#AN6

    await MyWebView.InvokeScriptAsync("eval", new string[] { "document.write('Hello World!')" }); 

    There's never been a requirement to inject javascript using eval - it was just assumed that if you needed to, you would just use the default function name and pass in the parameters strings as needed and described by the documentation.
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.invokescript.aspx



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.


    Friday, December 26, 2014 8:12 PM
    Moderator
  • Oh man, had I seen that it would have saved me hours. But my dumb ass glanced over it and assumed it was for injecting script.

    Thank you.

    PS I'm a fake programmer so these things don't come naturally for me.

    Friday, December 26, 2014 8:36 PM
  • It's a real shame because Herro explicitly posted that link in his first response to you. :-)

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, December 26, 2014 8:41 PM
    Moderator