Avoid inputting characters and triggering a new event

I am facing an issue with capturing the "keydown" event and then changing the focus to the last active element.

Whenever I try to set the focus to a specific element within the function that captures the event, either the "input" element receives a "char" afterwards, or the entire "form" element captures the "enter" key and submits the form again.

Here is my current code:

http://jsfiddle.net/BluesM/KkexX/4/

I have found a solution but it feels a bit clunky. In the function that captures the event, I use the following:

 setTimeout(function(){newFocus.focus();  }, 30);

where

newFocus

represents the element on which I want to set the focus. Is there a better way to achieve this?

Answer №1

To avoid default behavior on keydown event once the form has been submitted, call the preventDefault() method.

For a working example, check out this link: http://jsfiddle.net/KkexX/7/

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

Issue with disabling input field when selecting an option from a drop down menu

<div class="form-group form-animate-text col-lg-6 col-xs-12 col-md-6" > <select class="form-text" id="val_equipfc" name="val_equipfc" onChange="checkOption(this)" required> <option value = "A">Yes</option> < ...

Search form with a variety of fields that allows for searching without needing to repeat the component for each condition

I am currently facing an issue with my form that consists of multiple fields, each used to search through an API and display matching data in a table below. While I have successfully implemented this for one field, I now need it to work for all fields with ...

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

I've been immersed in developing a Chrome extension with Angular 5. Successfully, I managed to extract favIconUrls from the tabs API and link them to my popup.html's DOM. The icons are retrieved and displayed without any hiccups. See an example ...

Unable to detect errors using React/Redux

I encountered a login error handling issue with redux that is structured like this: export const login = (params: any) => async (dispatch: Dispatch) => { try { const authData = await API.post("login", params); sessionStorage.setIt ...

Chrome automatically scrolling back to the beginning of the page following a remote form submission

Rails Version: 5.2.2 Chrome Version: 78.0.3904.87 While testing my website on Chrome today, I encountered an issue where the page automatically scrolls to the top whenever an AJAX request is made. This problem only occurs in Chrome and not in other brows ...

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

ReactJS encountered an error: [function] is not defined, July 2017

Attempting to convert a JSON file into an array and then randomly selecting 5 items from it. I suspect the issue lies in my render/return statement at the end of ImageContainer.js, but as a newbie in ReactJS, it could be anything. Any assistance or guida ...

When redirecting to the same component, Vue.js hooks are not triggered

In my Vuejs project, I have two pages located at the same level with a common component. However, when I redirect from post/new to post/edit/:id, the beforeMount method is not being called. redirect() { this.$router.push({path: `home/post/edit/${this ...

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

I'm currently attempting to save the data that is read by fs into a variable. However, the output I am receiving is undefined. const fs = require("fs"); var storage; fs.readFile("analogData.txt", "utf8", (err, data) =&g ...

Executing a Function within UseEffect

I need help calling the function onSaveInputValue within the useEffect to make sure that the value is passed to the childInputValue hook whenever the page loads. const onSaveInputValue = (value) => { setChildInputValue(value); consol ...

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

I have been attempting to incorporate a fade animation using CSS when altering the class of the input and label elements within a form by utilizing the classList.toggle method in JavaScript. I'm puzzled as to why my code isn't producing the desir ...

Stop the page from loading initially

Is there a way to stop AngularJS from executing any actions during the initial page load? When a user accesses a page, the first content is delivered via PHP so AngularJS doesn't need to fetch content that's already present. I tried using $locat ...

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening? I ne ...

Encountering an issue with DateTimeField being undefined in a React.js application

I encountered an issue stating that DateTimeField is not defined while attempting to create a date picker in react + bootstrap. I referred to the following URLs for assistance: https://github.com/Eonasdan/bootstrap-datetimepicker Link to my code s ...

Utilizing the variable $this outside of an object context within an Ajax function

Encountering the following error: Fatal error: Uncaught Error: Using $this when not in object context in E:\xampp\htdocs\StudentGuideBook\Version1.0\models\AjaxChecking.php:4 Stack trace: #0 {main} thrown in E:\xampp&b ...

Is there a way to retrieve the value from an input box?

<td class="stockQuantity"> <input class="form-control" id="Cart1" name="qty_req" required="required" type="text" value=""><br> <button type="button" o ...

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

For the first time, I am encountering this issue. I am currently attempting to integrate this code into my application http://jsfiddle.net/TC6Gr/119/ My attempts include: Pasting all the jsfiddle code in a new page without my code, but it doesn't w ...

"Embrace the Tempus Dominus integration for the latest version of Bootstrap -

After reading through the script documentation, I attempted to implement it on my example page. However, I keep encountering the error: Uncaught TypeError: $(...).datetimepicker is not a function. Here's the code snippet that I included in the head s ...

If it doesn't function properly in JavaScript

The result from the 'If' statement is always the last one shown. Take a look at this code snippet: function calc(on, ep, am, ek, b1, b2, b3, b4) { var sum, mo; b1 = parseInt(b1); b2 = parseInt(b2); b3 = parseInt(b3); b4 = parseInt(b ...