How to add a keyboard listener to my onClick handler?

addeventlistener
mobile keyboard events
onkeypress
javascript keyboard events
keyboard events in javascript with example
onkeydown
how to disable key press event in javascript
javascript keyboard input

I have the following:

class MyTextArea extends React.Component {

  handleClick = () => {
    this.focus();
  }

  focus = () => this.ref.focus;

  handleRef = (component) => {
    this.ref = component;
  };

  render() {
    return (
      <div className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </div>
    );
  }
}

My CSS:

.magicHelper {
  width: 100%;
  height: 100%;
}
textarea {
  line-height: 32px;
}

I need this because I need the textarea's placeholder are to be horizontally and vertically centered in the page. Given textareas can't vertically center text, I need to keep the height of the textarea short. I therefore need to make it so when the user clicks outside of the textarea, thinking they are clicking the the textarea, the textarea auto focuses in.

This is causing an ESLint error: "Visible, non-interactive elements with click handlers must have at least one keyboard listener". How can I update the above to pass eslint?

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

It seems this rule is to enforce Accessibility standards.

Based on this, change your code to do something like this

<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>

You could also disable the rule in eslint, I suppose it depends on preference.

How to trigger an html button and its onclick function with a , The objective of this technique is to demonstrate how to add keyboard In HTML , keyboard handlers may be triggered by keydown, keyup, or keypress events. It is also helpful to provide onclick handlers, which trigger the default action for the � Want to add a keyboard listener to my onClick handler? In this case you can either disable the rule or update your code. its better to update your code to meet the web standards.

from ESLINT documents:

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

in this case you can either disable the rule or update your code. its better to update your code to meet the web standards.

 class MyTextArea extends React.Component {

      handleClick = () => {
        this.focus();
      }
      handleKeyDown = (ev) => {
          // check keys if you want
        if (ev.keyCode == 13) {
          this.focus()
         }
      }
      focus = () => this.ref.focus;

      handleRef = (component) => {
        this.ref = component;
      };

      render() {
        return (
          <div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
            <textarea></textarea>
          </div>
        );
      }
    }

Making actions keyboard accessible by using keyboard event , click – when the mouse clicks on an element (touchscreen devices generate In the example below adding a handler with JavaScript overwrites the Many of them depend on the event type: keyboard events have one set of� How to add a keyboard listener to my onClick handler? How to add data transformer inside a event listener; add onclick listener to a button in a fragment's xml; How to add ajax close listener to my panel dynamically? How to add Onclick listener to recycler view; How to add mouse listener to a component in a custom JTable header cell renderer

You can pass the ESLint warning/error by adding at least one keyboard listener, as answered by Kaysser. But I'd rather fix the real problem here, which is having click and keyboard listeners on an element that's not recognised as clickable by browsers and screen readers.

The error message ("Visible, non-interactive elements with click handlers must have at least one keyboard listener") describes a lot when you think about it; you've added a click handler to an element that's made to display information and not for the user to interact with. On top of adding a keyboard listener you should also change the cursor to a pointer on hover, add tabindex, role etc. to make it accessible and comprehensible.

The best fix for this is to change the div element to a button, that solves the ESLint warning but also tells all browsers and screen readers that this is an interactive element that you can click with all kinds of pointers (mouse, keyboard, finger, stylus).

class MyTextArea extends React.Component {
  render() {
    return (
      <button className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </button>
    );
  }
}

Introduction to browser events, Some programs work with direct user input, such as mouse and keyboard interaction. The <p>Click this document to activate the handler. The addEventListener method allows you to add any number of handlers, so you can't accidentally� Whenever you need to perform an action after clicking a button, link, or pretty much any element, you’ll use the onClick event handler. Therefore, the onClick event handler is one of the most powerful and most used tools in your React tool belt. Let’s look at some examples of how we can use the onClick event handler in React.

Chapter 14 Handling Events, To be able to react to keypresses, you would have to constantly read the key's state so that you'd <p>Click this document to activate the handler. This works for most types of events—you can attach a handler through the attribute whose� Add an event listener that fires when a user clicks a button: document.getElementById("myBtn").addEventListener("click", displayDate); Try it Yourself ». The addEventListener () method attaches an event handler to the specified element.

Handling Events :: Eloquent JavaScript, The (click) to the left of the equals sign identifies the button's click event as the target event.key for event.target.value in which case the same user input would Now, put it all together in a micro-app that can display a list of heroes and add � • An event listener is a programming element that listens for a specific event such as a keypress or a mouse-click that occurs while the program is running, and responds to the event by calling an event handler. • An event handler is an action that takes place in response to the event.

User input, In some cases, the Browser itself can trigger the events, such as the page load and For example, to assign a click handler for a button element, we can use However, to keep the JavaScript seperate from HTML, you can set up the event handler in Here're some most important keyboard events and their event handler. A node can register to more than one handler/filter. In case of parent–child nodes, you can provide a common filter/handler to the parents, which is processed as default for all the child nodes. As mentioned above, during the event, processing is a filter that is executed and during the event bubbling phase, a handler is executed.