How to know the reason of blur?

How can I know which event caused a blur event in jQuery?

Blur event triggered using click or tab etc. How can 开发者_JS百科I know this blur event is due to click or tab?

If you are trying to do two different things depending on which method was used, bind handlers to listen for .click() and .keyup(), then check for the keycode

var k = (window.event) ? event.keyCode : e.keyCode;

Or something on the order of this if you need

$(document).bind("click keyup", function(){
   //check keycode
   var e = (window.event);
   var k = (e)?event.keyCode:e.keyCode;
   if(k==9){
      //tab code
   }else if(e.type=='click'){
      //click code
   }

});

To be able to handle the type of input from within the blur handler, you will need to use mousedown and keydown events instead. This is due to the order of events.

When you have a text input focused and you click elsewhere on the page, the order will be:

• mousedown
• input blur
• mouseup
• click

Similarly, with a tab, it is

• keydown
• input blur
• keyup

You would need to store the "blur action" in an external variable so the blur handler can access it.

var _lastAction = "somethingelse";
$(document).bind("mousedown keydown", function () {
  //check keycode
  var e = window.event;
  var k = e ? event.keyCode : e.keyCode;
  if (k == 9) {
    //tab code
    _lastAction = "tab";
  } else if (e.type == "mousedown") {
    //click code
    _lastAction = "click";
  } else {
    _lastAction = "somethingelse";
  }
});

Then you can refer to the variable inside of your blur event handler.

I had to use this to maintain proper tabbing in a complicated dynamic form when pressing the tab. I had to check for click because trying to click/focus on a new spot in the form outside of tab order flow would still trigger the tab action, which would focus completely on the wrong element from what you were trying to click on.

Here comes the react TS hook version from 2022 (demo at the end of this answer)

the usage

• app.tsx

import { useHowYouBlur, BlurType } from "./useHowYouBlur";

const handleBlurBy = (type: BlurType) => {
  console.log(type);
};

const { ref } = useHowYouBlur({ onBlurBy: handleBlurBy });

<input ref={ref} />

the hook:

• useHowYouBlur.tsx

import {
  useEffect,
  RefObject,
  useCallback,
  KeyboardEvent,
  useRef,
  useState
} from "react";

export type BlurType = "tab" | "click";
export interface UseHowYouBlurReturn {
  ref: RefObject<any>;
}
export interface UseHowYouBlurProps {
  onBlurBy: (type: BlurType) => void;
}

export const useHowYouBlur = ({
  onBlurBy
}: UseHowYouBlurProps): UseHowYouBlurReturn => {
  const [isBlurByTab, setIsBlurByTab] = useState<boolean>(false);
  const ref = useRef<any>(null);

  const keydownHandler = useCallback(
    (e: KeyboardEvent<HTMLElement>) => {
      if (e.keyCode === 9) {
        setIsBlurByTab(true);
        onBlurBy("tab");
      }
    },
    [onBlurBy]
  );

  const blurHandler = useCallback(() => {
    if (!isBlurByTab) {
      onBlurBy("click");
    }
    setIsBlurByTab(false);
  }, [isBlurByTab, onBlurBy]);

  useEffect(() => {
    const node = ref.current;
    node.addEventListener("keydown", keydownHandler, true);
    return (): void =>
      node.removeEventListener("keydown", keydownHandler, true);
  }, [keydownHandler]);

  useEffect(() => {
    const node = ref.current;
    node.addEventListener("blur", blurHandler, true);
    return (): void => node.removeEventListener("blur", blurHandler, true);
  }, [blurHandler]);

  return { ref };
};

https://codesandbox.io/s/demo-how-you-blur-251op3?file=/src/App.tsx:250-268