๐คทโโ๏ธ ๋ณธ๋ก ์ ๋ค์ด๊ฐ๊ธฐ ์์
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์ธ์ฝ๋ฉ & ๋์ฝ๋ฉ ํด๋ณด๊ธฐ
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋ฆฌ์กํธ Vite Proxy ํ์ฉํ CORS ์ค๋ฅ ํด๊ฒฐ (1) | 2024.05.03 |
---|---|
React ํด๋๊ตฌ์กฐ FSD ๊ธฐ๋ฅ ๋ถํ ์ค๊ณ ์ํคํ ์ฒ (1) | 2024.05.02 |
React ์ค๋ณต ํ์ผ ์ ๋ก๋ ์ค๋ฅ ํด๊ฒฐ ๋ฐฉ๋ฒ (0) | 2024.03.14 |
immer๋ฅผ ์ฌ์ฉํด์ ๋ถ๋ณ์ฑ์ ์ง์ผ์ผํ๋ ์ด์ ์ ์์ ๋ณต์ฌ์ ๊ฐ๋ (3) | 2024.01.05 |
React ์ฅ๋ฐ๊ตฌ๋ ๊ธฐ๋ฅ ๊ตฌํ (35) | 2023.03.09 |