React

react input ๋ชจ๋“  ํ…์ŠคํŠธ ์„ ํƒํ•˜๋Š” ๋ฐฉ๋ฒ•

martinooo 2024. 3. 21. 16:40

 

๐Ÿคทโ€โ™‚๏ธ ๋ณธ๋ก ์— ๋“ค์–ด๊ฐ€๊ธฐ ์•ž์„œ


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์ธ์ฝ”๋”ฉ & ๋””์ฝ”๋”ฉ ํ•ด๋ณด๊ธฐ