Currently, I am working on detecting a keydown event for the spacebar in my JavaScript file and executing certain logic based on it. In my HTML code, there is a "compose" button that reveals the message-container when clicked.
The functionality I aim to achieve is similar to Gmail's feature of converting email addresses into tags as soon as the user hits the space bar. The challenge here is ensuring that only valid email addresses are converted into tags by confirming the string before the space is indeed a valid email address.
To accomplish this, I have set up an onclick function for the recipient container and a keydown function specifically for the spacebar key.
However, I've encountered an issue. Upon the initial page load, everything works smoothly. When I click inside the recipient box and press the spacebar, "spacebar pressed" is correctly displayed once in the browser console for each key down event.
But here's where the problem arises. If I hide the message-container by clicking the "close" button, then show it again with the "compose" button, pressing the spacebar within the recipients box triggers two "spacebar pressed" events instead of one.
Subsequently, if I repeat the process of hiding, showing, and clicking, the number of "spacebar pressed" outputs increases incrementally for each spacebar keydown event.
It seems like there might be an issue related to binding and unbinding events or something else entirely. I've gone through similar resources discussing how the keydown event can get repeatedly bound, but I'm struggling to find out how to effectively prevent this event from firing upon clicking the "close" button.
Below is the HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>ZMail</title>
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
// Other CSS and script imports...
</head>
<body>
<div class="header">
<h2>ZMail</h2>
</div>
// HTML structure...
</body>And here is the JS code:
var contacts = ['<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9d9297898f94d28e9b8abc9b919d9590d29f9391">[email protected]</a>']
// Event handling functions...
Any assistance in resolving this issue would be highly appreciated.