Easy way to add Keyboard and Mouse events to WebBrowser control

Today I dirtied my hands researching about how to add keyboard and mouse events to the .NET WebBrowser control. It is not as straight-forward as it might look at first instance. The WebBrowser control suppresses these events in one way or the other and you can’t trap them at the control level or at form level (by setting KeyPreview to True etc.).

However there are still ways to trap the mouse and keyboard events in the WebBrowser control. For this demo and to keep the code short, I’ll show only two events – the KeyDown event and the MouseDown event. But you can add any of the other events you wish to in just the same way.

Start Visual Studio and create a new VB.NET Windows Forms application.

Add a WebBrowser control and a Button to your form.

Add the following code:

Private Sub WebBrowser1_DocumentCompleted(ByVal sender As System.Object, ByVal e As Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
    Dim document As HtmlDocument = WebBrowser1.Document
 
    'Attach KeyDown event handler
    AddHandler document.Body.KeyDown, New HtmlElementEventHandler(AddressOf WebBrowser1_KeyDown)
    'Attach MouseDown event handler
    AddHandler document.Body.MouseDown, New HtmlElementEventHandler(AddressOf WebBrowser1_MouseDown)
End Sub
 
Private Sub WebBrowser1_KeyDown(ByVal sender As Object, ByVal e As HtmlElementEventArgs)
    If e.CtrlKeyPressed And e.KeyPressedCode <> Keys.ControlKey Then
        'CTRL+SomeKey was pressed.
        Debug.WriteLine("CTRL + " & Chr(e.KeyPressedCode))
    ElseIf e.ShiftKeyPressed And e.KeyPressedCode <> Keys.ShiftKey Then
        'SHIFT+SomeKey was pressed.
        Debug.WriteLine("SHIFT + " & Chr(e.KeyPressedCode))
    ElseIf e.AltKeyPressed AndAlso e.KeyPressedCode <> Keys.Alt Then
        'ALT+SomeKey was pressed.
        Debug.WriteLine("ALT + " & Chr(e.KeyPressedCode))
    Else
        'SomeKey was pressed without any modifier keys.
        Debug.WriteLine(Chr(e.KeyPressedCode))
    End If
End Sub
 
Private Sub WebBrowser1_MouseDown(ByVal sender As Object, ByVal e As HtmlElementEventArgs)
    If e.MouseButtonsPressed = Windows.Forms.MouseButtons.Left Then
        'MouseDown event
        Debug.WriteLine("MouseDown at " & e.MousePosition.X & "," & e.MousePosition.Y)
    End If
End Sub

Run the code. Click the Button. This will open the Google website and add the mouse and keyboard event handlers.

Now press any key / key-combination or click anywhere in the WebBrowser control and watch is printed in the Debug window.

Enjoy Hot

How the Code Works

The WebBrowser control does not expose the mouse and keyboard events directly. Even if you build your own control inherited from the WebBrowser class or the WebBrowserBase class, the events have been cleverly hidden. There might be some tricky way to expose the events I never know of (e.g. overriding the WndProc etc.).

Fortunately the HTMLDocument class provides ways to hook keyboard and mouse events to the document it is hosting. It is almost same as javascript events but with and added advantage of hooking up with managed code in our application.

Always take care to attach the event handlers when the page has fully loaded in your WebBrowser control. Otherwise, you will experience problems. So the best place to do that is the DocumentCompleted event.

References & Further Readings

Keywords: WebBrowser Control, Keyboard events, mouse events, KeyUp, KeyDown, KeyPress, MouseDown, MouseUp, MouseMove, HtmlElementEventHandler, HtmlDocument

Advertisements

27 Responses to “Easy way to add Keyboard and Mouse events to WebBrowser control”

  1. Maxc Says:

    Thank you dude!:)
    It really helped me)

    from BMSTU.

  2. Tasti funzione per evento - Visual Basic .Net - MasterDrive.it Says:

    […] vuoi intercettare l'evento KeyDown o KeyUp direttamente nel WebBrowser, come spiegato anche qui: Easy way to add Keyboard and Mouse events to WebBrowser control Pradeep1210's Blog , dovrai aggiungere manualmente la gestione dell'evento .Document.Body.KeyUp. Per farlo, […]

  3. sufianrashid Says:

    hi pradeep,
    i m trying to simulate a button click inside the webbrowser control, do you have any idea it can be done?

    I found a relative article at:
    http://www.geekpedia.com/code139_Simulate-Mouse-Click-On-WebBrowser-Control.html

    but in that i need to manually give the X and Y coordinates. Any idea of getting the button dynamically?
    if not then is there any way to get X and Y coordinates of a mouse’s current position in .net?

  4. sufianrashid Says:

    i got the mouse position from Cursor.Position.X
    Can i simulate TYPING in someway?

  5. sufianrashid Says:

    well previously i was using Watin and it was going fine..but now there’s a javaApplet object in browser.and i can’t get it’s internal TextBox and Buttons.
    all i can think is of getting their position and simulating them through window handles.

  6. blistering Says:

    how would you go about using xButton1 and xButton2 with this? i tried using Windows.Forms.MouseButtons.XButton1
    instead of Windows.Forms.MouseButtons.Left but nothing happens, im trying to figure a way to make the 4th and 5th mouse buttons to do WebBrowser1.GoBack() and WebBrowser1.GoForward() with little luck

  7. mmo84 Says:

    How to simulate mouse click a link in webbrowser control? I try use linkelement.InvokeMember(“click”), .InvokeMember(“onclick”), .RaiseEvent(“click”)… but not work correctly.
    Thanks!

  8. Freeze Says:

    ok, im tired play with this..you can try your self on this, its totally useless doing such a thing
    i add the following control in my form
    _________________________________________
    Public Class Form1
    Dim config As String = My.Computer.FileSystem.CurrentDirectory & “/config.ini”
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    WebBrowser1.Navigate(“C:/WINDOWS/”)
    End Sub
    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
    End
    End Sub
    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
    WebBrowser1.Navigate(“www.google.com”)
    End Sub
    End Class
    _________________________________________

    then set “IsContextMenuEnable” to false on the webbrowser1 control
    after build it, i notice that i cant right click anymore on the webbrowser when its was on google.com
    and i still can right click on the webbrowser when its was on my “C:/WINDOWS/”

    my question, how do i disable right click all over my form or in just my webbrowser?
    im really appreciate if someone can show me the way

  9. how to make clickable html elements? (html and vb.net webbrowser) – simple html editor Says:

    […] Its similar to this post I found except I want a specific html 5 element in the html document loaded in the browser when clicked: https://pradeep1210.wordpress.com/2010/03/19/easy-way-to-add-keyboard-and-mouse-events-to-webbrowser-… […]

  10. prashant Says:

    gr8…. thanx a lot…… i was trying this since long…….. thanx again

  11. http://www.prnewswire.com/ Says:

    Excellent review I began with Green Smoke and I’ve really already been enjoying them. Thanks!

  12. aries Says:

    nice article, is it also possible to catch the click event when I load an Excel file.. the click event would fire every time i clicked on a cell…

  13. Wildest_Lucy Says:

    Aren’t you re-re-re-re-re-adding the handler code, every time the webBrowser completes a loading event?

  14. Fusilli con Funghi Says:

    how about capturing F1 – F12 keys?
    it seems like that e.KeyPressedCode do not recognize F1-F12 keys

  15. Smart_Tech_Girl Says:

    I used this code to catch 2 keys: ESC and F11 keys. They work 100% to “exit my prg” and “make it full screen”.
    Unfortunately, it only works until I hit F5 (refresh). After I refresh… then my 2 keys never work again.

    • pradeep1210 Says:

      It won’t work and you probably already know the reason why 🙂
      When you press F5 (or click the refresh button on toolbar), the whole page is reloaded. Anything that was there on the page earlier is wiped out; the page is loaded from scratch.

      • Patty Says:

        … so how can that be fixed???? (Why do people tell “the problem” but never tell how to FIX the problem???)

      • pradeep1210 Says:

        I think the only way to get around this problem is to not let the page refresh. Instead put your whole page or relevent parts of the page in a container and do partial page (AJAX) calls to load it. AJAX calls won’t load the document from scratch, so that would work.

  16. Patty Says:

    > Always take care to attach the event handlers when the page has fully loaded in your
    > WebBrowser control. Otherwise, you will experience problems. So the best place to do
    > that is the DocumentCompleted event.

    Won’t that re-re-re-re-recreate the handlers many times over? Or does that not matter?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: