CODEWITHSUNDEEP
javascriptreactjs
Alexandra
Alexandra

Reputation: 181

How do I detect the event when tab on an input?

How do I detect the event when tapping on an input?

I have a form where I have 5 inputs. I need to add a ccs class that changes the color of the label when the user changes from one input to another by tab

const InputGroup = function () {
  const greating = function (e) {
    console.log(e.target.value);
    console.log("only clicked");
  };
  return (
    <div className="input-group-with-icons">
      <label htmlFor="name" className="form-label">
        Name:
      </label>
      <div className="input-group">
        <span className="input-group-text iconify" id="basic-addon1" data-icon="carbon:string-text" data-width="50" data-height="50"></span>
        <input type="text" className="form-control" placeholder="Name" aria-label="name" aria-describedby="basic-addon1" name="name" onClick={greating} />
      </div>
    </div>
  );
};
export default InputGroup;

I can't find a way to detect the tab event

enter image description here

Upvotes: 1

Views: 615

Answers (1)

Sam
Sam

Reputation: 191

You can use the focus event to detect focus in Javascript:

<input type="text" onfocus={focusinhandler} onfocusout={focusouthandler} />

If your goal is to changing styling, you can use the :focus selector in CSS:

.input-group-text.iconify:focus {
    // Colour Change
}

which is applied when an element gains focus.

Upvotes: 1

Related Questions