Issue with Keypress Event not Functioning with Image Control in Asp.Net

Struggling to capture key press events on an image control in asp.net. The code I've tried doesn't seem to be working. Here's what I have:

<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
    function keyPress(e) { alert('hi'); }
</script>
</head>

<body>
<form id="form1" runat="server">
<div>        
    <img id="img1" alt ="" width="950" height="950" onkeypress="keyPress();"  src="Images/090069_0709152912.jpg" />        
</div>    
</form>
</body>

Any suggestions on how to make this work?

Answer №1

It seems you are attempting to listen for a keypress event on an element that does not have focus. Here is a demo - You will see that the alert triggers for the document event, but the keypress event does not work on the image.

If you are looking to globally listen for specific keys to change an image, you can bind the event to the document and check for the keys within the event handler.

document.onkeypress = function(e){
    // Your code here
};

For assistance in determining key codes, you can refer to this helpful site.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Chart.js to extract and display specific data values from an external JSON file

I am currently engaged in a journey of self-exploration where I aim to create a chart depicting the number of anime shows with comedy or fantasy genres. The data for my chart will be sourced from an external JSON file (anime.json) on my computer. Initially ...

Click on the button to automatically scroll to a specific component inside the dialog

In my JSF/Primefaces application, I have a page with a long content that can be scrolled, along with a dialog also containing lengthy content that requires scrolling. The dialog includes a button and I am looking to scroll the dialog content to a specific ...

What could be causing the async request with await to not properly wait for the response data?

I'm having trouble with the await function in my code, can anyone provide assistance? I've followed tutorials and copied the code exactly as shown but it still doesn't work. The CardsID array needs to be filled before I call console.log(Card ...

Using JavaScript to define an array of objects

My issue lies with transforming a JSON structure like the one below: [{ "groupid": 29, "percentage": 14 }, { "groupid": 29, "percentage": 22 }, { "groupid": 59, "percentage": 66, }] I am looking to convert it into the format shown ...

Is there a way to switch the classList between various buttons using a single JavaScript function?

I'm currently developing a straightforward add to cart container that also has the ability to toggle between different product sizes. However, I am facing difficulties in achieving this functionality without having to create separate functions for ea ...

Issues encountered with URL Rewrite functionality in IIS version 10.0

Currently utilizing URL Rewrite on IIS 10.0 with a rule set up at the server level (applicationHost.config). I have also attempted to implement this in my web.config without success. <rewrite> <globalRules> <rule name="redirect" ...

When using NextJS with next-i18next and Firebase functions, all pages are redirected to a 404 error page if the locale is included

I have implemented next-i18next with Next.js in a setup that involves SSR deployed to Firebase functions. I followed the guidelines provided in this documentation https://github.com/i18next/next-i18next During development, everything functions correctly, ...

How can I implement a progress bar that mimics an exchange platform behind data-table components? [Using Vue and Vuetify]

I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table. https://i.stack.imgur.com/9gVsY.png This is the template for my data-table: < ...

What are the steps to include a string into Vue and then assess its value?

Where should I define a function in a SPA using the options API that will be called from an HTML href? Check out this demo on Codepen where everything works fine: CODEPEN However, when I try to implement it in my single-page application: <templat ...

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

I am encountering an error message when attempting to upgrade from Webpack 4 to Webpack 5. The error states: Module.entryModule: Multiple entry modules are not supported by the deprecated API (Use the new ChunkGroup API) I have searched for information o ...

Javascript code fails to execute properly on IE8

I have a scenario where I am working with two drop-down menus. When the user selects an option from one menu, it should dynamically change the options in the other menu. However, I'm facing an issue with Internet Explorer where the second drop-down me ...

The script is stuck displaying the existing records, failing to update with any new ones

Kindly refrain from offering jQuery advice. This script is created to display additional database records when you scroll down to the bottom inside a div named results-container. The issue I'm encountering is that the same data keeps appearing. I&ap ...

Load media upon the click of an image

I'm currently in the process of designing a team page for our website. Each team member's photo is displayed in a grid layout, with two boxes positioned below containing various content. Box 1: This box consists of basic text information. Box 2: ...

The underscore (_) parameter in HTTP GET requests

Lately, I've been seeing the '_' parameter on many websites with a seemingly random string attached to it. For example: website.com/?_=98765432 Can someone explain the significance of this parameter and how these numbers are generated? ...

Tips for optimizing the reuse of Yup validation schemas and improving the duplication coverage on sonar scans for Yup validation files

I am currently dealing with multiple forms that have some fields in common such as name, phone number, and account number. I am utilizing Formik and have created a schema file (schema.js) for each form. Within this file, I have outlined all the schema vali ...

Accessing a JavaScript URL beyond the Facebook frame application

I have developed a Facebook application with a navigation menu, and I am seeking a way to open links outside of the iframe app. Is it possible to achieve this? Currently, I am using the code below which loads inside the iframe but I am unable to get it t ...

Tips for maximizing website performance on touch-enabled devices

When using a touch device such as an iPhone, iPad, or Android device, it can be challenging to accurately tap on small buttons with your finger. So far, there is no universal method in CSS media queries to detect touch devices. As a workaround, I check if ...

Issue: requireJS configuration is invalid

Here is the file structure of my project - src |- main.js |- math.js The math.js file acts as an AMD module and is being required in main.js. I have npm installed require.js and included it in main.js. //main.js var rjs = require('requirejs' ...

"Creating a user-friendly time selection feature similar to Google Analytics in

Does anyone know of a time range selector that functions like the draggable time line section in Google Analytics? Google offers a time line selection feature using three blocks, which can be replicated with Jquery UI and other methods. However, achieving ...

Tips for setting up a typeorm entity with attention to its nullable fields

How can I assign values to typeorm entities and insert them into the database? import { PricingPatternElement } from file const Element:PricingPatternElement = { displayOrder: 10, elementName: "test", createdAt : getCurrentDate(), createdBy: &qu ...