5f-모바일-웹브라우저에서-키패드-컨트롤

/**  
 * https://stackoverflow.com/a/55652503
 * iOS/Android 웹브라우저에서 input에 focus를 줄 때 keyboard가 올라오도록 도와주는 함수.  
 * 매개변수의 focus 함수에서 focusing을 하지 않으면, 함수 호출 직전에 focusing 되어있던 input은 blur가 되고 keyboard가 내려간다.  
 * @param focus 특정 input에 focus를 줄 때 사용하는 함수  
 * @param timeoutMs 실행 순서를 보장하기 위한 setTimeout함수에 넣을 값. 0으로 사용해도 무방하다.  
 */
export const focusAfterBlur = (focus: () => void, timeoutMs = 0) => {  
  // create invisible dummy input to receive the focus first  
  const fakeInput = document.createElement('input');  
  fakeInput.setAttribute('type', 'text');  
  fakeInput.style.position = 'absolute';  
  fakeInput.style.opacity = '0';  
  fakeInput.style.height = '0';  
  fakeInput.style.fontSize = '16px'; // disable auto zoom  
  
  // you may need to append to another element depending on the browser's auto  // zoom/scroll behavior  document.body.prepend(fakeInput);  
  
  // focus so that subsequent async focus will work  
  fakeInput.focus();  
  
  setTimeout(() => {  
    // now we can focus on the target input  
    focus();  
  
    // cleanup  
    fakeInput.remove();  
  }, timeoutMs);  
};