CODEWITHSUNDEEP
c#uwpwinrt-xamluwp-xaml
Zaph
Zaph

Reputation: 38

Is there a way to disable CTRL + I, tab insertion in .NET UWP WebView

I am currently developing a UWP application and I have a WebView control, which a user interacts with. In this WebView, the user can format some text, and I would like for CTRL + I to apply italics formatting to any selected text.

When pressing CTRL + I the application formats the text (Which is handled using jQuery on the visited site), however, any selected text is replaced with a tab character.

I am aware that the CTRL + I keypress event results in keycode 9, which corresponds to a tab character, however, I am wondering if there is a way to disable this interaction?

I have tried intercepting both KeyDown and PreviewKeyDown events, however with no success. The events never fired, and I am assuming this is because I am entering text inside a webview. I also checked that the character is not inserted, when opening the visited page, using a normal web browser.

Below is the context of the webview.

<Page
    <!-- imports -->
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <WebView x:Name="Editor"
                 Source="ms-appx-web:///WebView.html"
                 ScriptNotify="Editor_ScriptNotify"
                 NavigationStarting="Editor_NavigationStarting"
                 NavigationCompleted="Editor_NavigationCompleted"/>
    </Grid>
</Page>

Upvotes: 1

Views: 144

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32785

Is there a way to disable CTRL + I, tab insertion in .NET UWP WebView

I'm afraid you can't disable Ctrl + i from uwp side. the better way is process multiple key press with javascript in html side.

For example

 <body>
    <script type="text/javascript">

        let keysPressed = {};
        document.addEventListener('keyup', (event) => {
            delete keysPressed[event.key];
        });
        document.addEventListener('keydown', (event) => {
            keysPressed[event.key] = true;

            if (keysPressed['Control'] && event.key == 'i') {

                event.preventDefault();

                document.execCommand('italic', false, null);

            }
        });

    </script>
    <div id="editor1" contenteditable="true">
        The quick brown fox jumped over the lazy dog.
    </div>
</body>

You could detect keydown event and disable the default behavior with preventDefault method and add the execute new command when Ctrl + i pressed like above.

Upvotes: 1

Related Questions