react input 모든 텍스트 선택하는 방법

 

🤷‍♂️ 본론에 들어가기 앞서

---

React 프로젝트 중에 input 입력 후에 Enter or 등록 버튼 후에 모든 테스트를 선택해야 되는 기능을 만들어야 했다. 

 

나는 자바스크립트에 addeventlistener 메소드를 활용해서 하려고 했지만 더 좋은 방법이 있기 때문에 기억보다는 기록으로 남겨본다.

 

🤷‍♂️ focue가 맞춰지면 React를 사용하여 입력 요소의 모든 텍스트를 선택

---

input 포커스가 되면 입력요소에 모든 텍스트를 선택하는 select() 요소를 활용해서 포커스가 있을 때 모든 텍스트를 선택하는 방법

 

select() 요소를 활용해서 input 요소에 모든 텍스트를 선택하는 이유는 똑같은 값을 사용하거나 전체 삭제를 효과적으로 사용할 수 있기 때문에 필요한 기능이다.

 

EX:

App() { 
	const handlerFocus = (event) => event.target.select();
	return ( 
	  <input readOnly type="text" value="Some Something" onFocus={handleFocus} /> 
	); 
}

 

 

🤷‍♂️ 키보드 enter 클릭후 입력 요소의 모든 텍스트 선택

---

input 텍스트 입력후 enter를 누르면 select() 요소를 활용해서 모든 텍스트를 선택하는 방법

* 사용자 행동에 따라서 전체 텍스트를 select() 요소를 활용해서 구현하면 된다.

 

input keyDown 이벤트로 enter를 누르면 input 모든 텍스트 요소가 전체 선택된다.

 

EX:

App() {
  const handlerKeyDown = (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      event.target.select();
    }
  };

  return (
    <div className="App">
      <input
        readOnly
        type="text"
        value="Some Something"
        onKeyDown={handlerKeyDown}
      />
    </div>
  );
}

 

 

javascript 이벤트를 활용해 onKeyDown, onFocus 사용하여 사용자의 액션에 따라서 모든 텍스트 요소를 선택하려면 select 메서드를 활용해서 모든 텍스트 선택할 수 있다. 다른 방법도 있겠지만 나는 select 메서드를 활용해서 구현을 했다.

 

---

URL인코딩 & 디코딩 해보기