How can the onclick event be activated by pressing the enter key with inline javascript?

Question

How can the onclick event be activated by pressing the enter key with inline javascript?

[FYI: I am not permitted to alter the existing markup. The div will be clicked, not a button or anchor]

I have a menu that needs to comply with accessibility standards and open its submenu upon being clicked.

This onclick function needs to be triggered when the enter key is pressed as well,

 // parent menu (will repeat)        
    <div onclick="javascript:ToggleMenu('Calendar');" class="menu-item" style="cursor: hand;" tabindex="2">
        <p>Calendar</p>
        </div>

//submenu (will repeat)
            <div id="Calendar" class="menu-subitem" style="display: none;" tabindex="2">


            <a onclick="Audit(this)" tabindex="2" href="Calendar/CalendarAssignment.aspx" id="TM_C1">Calendar Assignment</a>
             <a onclick="Audit(this)" tabindex="2" href="Calendar/ShiftAssignment.aspx" id="TM_C2">Shift Assignment</a>
            </div>

Thanks! I have done my best to explain clearly!

javascript

Answer 1

Answer №1

Here is a solution that focuses on accessibility while utilizing a div:

<div id="foo" role="button" tabindex="0">Toggle menu</div>

<script>
    $('#foo').click(function() {
        ToggleMenu('<%# Container.DataItem.FuncID %>');
    }).keydown(function(e) {
        if (e.which === 32 || e.which === 13) {
          this.click();
        }
    });
</script>

Although, it is recommended to simply use a button:

<button id="foo">Toggle menu</button>

<script>
    $('#foo').click(function() {
        ToggleMenu('<%# Container.DataItem.FuncID %>');
    });
</script>

Answer 2

Here is a solution that focuses on accessibility while utilizing a div:

<div id="foo" role="button" tabindex="0">Toggle menu</div>

<script>
    $('#foo').click(function() {
        ToggleMenu('<%# Container.DataItem.FuncID %>');
    }).keydown(function(e) {
        if (e.which === 32 || e.which === 13) {
          this.click();
        }
    });
</script>

Although, it is recommended to simply use a button:

<button id="foo">Toggle menu</button>

<script>
    $('#foo').click(function() {
        ToggleMenu('<%# Container.DataItem.FuncID %>');
    });
</script>

Answer 3

Answer №2

To ensure this action occurs when the enter key is pressed on any part of the webpage:

<div onclick="javascript:ActivateMenu('<%# Container.DataItem.FuncID %>');">
<script>
    document.addEventListener("keypress", function (evt)
    {
        if (evt.keyCode === 13) {
            //enter key was pressed

            //locate the target div
            var div = document.querySelector('div[onclick*="ActivateMenu"]');
            //trigger the event
            div.onclick.apply(div);
        }
    }
    );
</script>

Answer 4

To ensure this action occurs when the enter key is pressed on any part of the webpage:

<div onclick="javascript:ActivateMenu('<%# Container.DataItem.FuncID %>');">
<script>
    document.addEventListener("keypress", function (evt)
    {
        if (evt.keyCode === 13) {
            //enter key was pressed

            //locate the target div
            var div = document.querySelector('div[onclick*="ActivateMenu"]');
            //trigger the event
            div.onclick.apply(div);
        }
    }
    );
</script>

Answer 5

Answer №3

It appears that there is an error in the code you have written

onclick"javascript:xxxx"

is not the correct syntax,

"javascript:xxx"

Instead, you should be using the "a" tag's "href" attribute. Simply remove the "javascript:" from the onclick attribute and you should achieve the desired result.

Answer 6

It appears that there is an error in the code you have written

onclick"javascript:xxxx"

is not the correct syntax,

"javascript:xxx"

Instead, you should be using the "a" tag's "href" attribute. Simply remove the "javascript:" from the onclick attribute and you should achieve the desired result.

How can the onclick event be activated by pressing the enter key with inline javascript?

Answer №1

Answer №2

Answer №3

Similar questions

The error "map is not a function" occurs when trying to update the

Exclude the UL hierarchy from removing a class in jQuery

Loading Angular.js scripts into the webpage

Any tips on how to properly display a div along with script tags in React?

jQuery GetJson fails to execute success function

The callback function used for the database query did not provide any results

Modify the color of the select element when it is in an open state

AngularJS showing up as normal text

The results of the jQuery selector appear differently in the browser console compared to PhantomJS

Incorporating dynamic elements without sacrificing the original static page

Having trouble getting the express router to function properly in your Node.js TypeScript project?

Error message consistently pops up when using the jQuery search feature

Checking for undefined values in fields within an array of objects using scenarios in JavaScript

What is the method to retrieve the ID name of an HTML tag based on its value?

Use a for loop to iterate through elements and retrieve input values using getElementById()

Using a JavaScript callback function as a parameter for the addJavascriptInterface method in Java

React-spring is causing an increase in the number of hooks rendered compared to the previous render in React

"Utilize Node.js to seamlessly stream real-time Instagram photos based on a designated hashtag

"From time to time, reimport React when saving to ensure all necessary imports are

Unravel a Base64 encoded string with the power of CryptoJS