Detecting the Shift + Enter keyboard combination in an textarea element

Question

Following this question, I want to detect the Shift + Enter keyboard combination in an textarea element. Consider the code block below:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta http-equiv="x-ua-compatible" content="ie=9" />
    <title>test</title>

    <HTA:APPLICATION APPLICATIONNAME="test" />

    <style type="text/css">
        textarea {
            resize: none;
            overflow: auto;
            min-height: 50px;
            max-height: 200px;
            width: 100%;
        }
    </style>

    <script language="javascript">
        function auto_grow(element) {
            element.style.height = "5px";
            element.style.height = (element.scrollHeight) + "px";
        }
    </script>

    <SCRIPT Language="VBScript">
        Sub onkeydown_script()
        If window.event.Keycode = 16 Then
        Msgbox "You pressed the Shift key."
        End If
        End Sub
    </SCRIPT>

</head>

<body>

    <textarea oninput="auto_grow(this)" onkeydown="onkeydown_script()" onkeyup="onkeyup_script()" wrap="off"></textarea>

</body>

</html>

where I tried to detect the Shift upon onkeydown event and failed. I would appreciate if you could help me know what is the canonical method to detect the Shift + Enter keyboard combination.

P.S.1. Any other suggestions to improve the code above is also highly appreciated.

P.S.2. The solutions don't have to be in VBScript. In fact, JScript solutions are even better given that's the language I better understand.

P.S.3. I would appreciate that the folks reading this post consider that JScript and JavaScript are similar but not identical languages. Samwise HTAs are not conventional HTML documents per se. Neither HTML and JavaScript have been tagged here, so please consider that.

P.S.4. IMHO, the canonical solution should be either using the specific Keycode for the keyboard combination, or there should be a global variable that indicates the state of the Shift, or if such a predefined variable doesn't exist, we may define one ourselves. I tried the shiftKey property from this page and this page, neither seem to work.

P.S.5. Surprisingly enough, the example on this page works fine.

P.S.6. Sadly this post has been marked as a duplicated of this one, so here I will explain why this decision is unjust:

It is not for a key combination but only one key, which is relatively easy
The posts are VBScript exclusively while mine also includes JScript
And finally, the post doesn't have an accepted answer

more information here.

Have you tried any js instead? https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey — Alex Hedley, Nov 10 '20 at 21:36
https://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea/6015906#6015906 — Alex Hedley, Nov 10 '20 at 21:37
@AlexHedley I was actually checking that page a second ago and wrote about on the **P.S.4.** it doesn't work in an HTML Application (HTA) — Foad S. Farimani, Nov 10 '20 at 21:37
Did you find a reason why? Is it not a compatible js version? — Alex Hedley, Nov 10 '20 at 21:43
@AlexHedley I don't that it is. Was hoping that you know better. :) — Foad S. Farimani, Nov 10 '20 at 21:48
I would have expected it to work, shouldn’t be a reason it doesn’t, is it any keys it doesn’t pick up or a combination? — Alex Hedley, Nov 10 '20 at 21:49
when I use the example on the page I get [this error](https://stackoverflow.com/q/64757531/4999991). — Foad S. Farimani, Nov 10 '20 at 21:51
But that’s using vbs not js and has a solution, so there is no error — Alex Hedley, Nov 10 '20 at 21:53
@AlexHedley Could you be kind to try the examples [here](https://documentation.help/DHTML-zh/shiftkey.html) or [here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey) or [here](https://stackoverflow.com/a/6015906/4999991) in an HTA and let me know about the results? — Foad S. Farimani, Nov 10 '20 at 21:56
What error do you get when you try it? Could you update your question with the script you tried — Alex Hedley, Nov 10 '20 at 21:57
@AlexHedley I don't get any errors, or one similar to the one I have reported before. for example error about `charCode` not being recognized. I replaced it with `Keycode`, no error then but the functionality doesn't work. — Foad S. Farimani, Nov 10 '20 at 22:00
@AlexHedley I think I solved the problem [here](https://stackoverflow.com/a/64777754/4999991) — Foad S. Farimani, Nov 10 '20 at 22:33

score 0 · Answer 1 · answered Nov 10 '20 at 19:35

If you want a code that returns a msgBox if you do shift + enter then this is a code that works.

 <!DOCTYPE html>
<html lang="en">

<head>

    <meta http-equiv="x-ua-compatible" content="ie=9" />
    <title>test</title>

    <HTA:APPLICATION APPLICATIONNAME="test" />

    <style type="text/css">
        textarea {
            resize: none;
            overflow: auto;
            min-height: 50px;
            max-height: 200px;
            width: 100%;
        }
    </style>

    <script language="javascript">
        function auto_grow(element) {
            element.style.height = "5px";
            element.style.height = (element.scrollHeight) + "px";
        }
    </script>

    <SCRIPT Language="VBScript">
        Sub onkeydown_script()
        If window.event.Keycode = 16 and 13 Then
        Msgbox "You pressed the Shift and Enter key."
        End If
        End Sub
    </SCRIPT>

</head>

<body>

    <textarea oninput="auto_grow(this)" onkeypress="onkeydown_script()" onkeyup="onkeydown_script()" wrap="off"></textarea>

</body>

</html>

well, the `Msgbox` is of course a dummy feature there to test and demonstrate the functionality. Are you sure that this the canonical way to do it? — Foad S. Farimani, Nov 10 '20 at 19:40
It might not be canonical but it is the most basic way. It is basically your code with just 2-3 additions. — coder9927, Nov 10 '20 at 19:49

score 0 · Answer 2 · answered Nov 10 '20 at 22:33

OK, I think I found a "canonical" solution. I modified the example from this page:

<html>

<head>
    <title>shiftKey example</title>

    <script type="text/javascript">

        function showChar(e) {
            alert(
                "charCode: " + e.keyCode + "\n"
                + "Shift key pressed: " + e.shiftKey + "\n"
                + "Alt key pressed: " + e.altKey + "\n"
                + "Ctrl key pressed: " + e.ctrlKey + "\n"
            );
        }

    </script>
</head>

<body onkeypress="showChar(event);">
    <p>Press any character key, with or without holding down <br />
        the <kbd>Shift</kbd> key.<br />
        the <kbd>Alt</kbd> key.<br />
        the <kbd>Ctrl</kbd> key.<br />
        or a combination of those.</p>
</body>

</html>

Points:

the event.keyCode is case sensitive.
the String.fromCharCode() doesn't exist.

Also, don't pay attention to my code because even if you only enter the shift key, the msgBox will still come. — coder9927, Nov 10 '20 at 23:22

Detecting the Shift + Enter keyboard combination in an textarea element

2 Answers2