๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒˆ ํƒ€๋ฏธ๋…ธํŠธ

input ๊ด€๋ จ ์ด๋ฒคํŠธ ํŒŒํ—ค์น˜๊ธฐ - input onChange onKeyUp onKeydown

by Tamii 2022. 6. 1.
๋ฐ˜์‘ํ˜•

ํšŒ์‚ฌ์—์„œ value์— ๋”ฐ๋ผ style์ด ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„  input์„ ๋งŒ๋“ค์–ด์•ผ ํ–ˆ๋Š”๋ฐ,

input event๋ฅผ ํ™œ์šฉํ•ด์„œ ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ์š”.

์ •ํ™•ํžˆ ์™œ ํ•ด๊ฒฐ๋˜์—ˆ๋Š”์ง€ ์›๋ก ์ ์œผ๋กœ ์ ‘๊ทผํ•ด๋ณด๊ณ  ์‹ถ์–ด์„œ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ ์—ˆ์Šต๋‹ˆ๋‹ค.

 

input event์— ๋Œ€ํ•œ ๋‚ด์šฉ์€ ๊น€๋งฅ์Šค ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ- input ์š”์†Œ ๊ด€๋ จ ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ ์ด์ •๋ฆฌ ๋ฅผ ํ™œ์šฉํ–ˆ๋Š”๋ฐ ์ •๋ง ์ •๋ฆฌ๊ฐ€ ๋„ˆ๋ฌด ์ž˜๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค. ๊น€๋งฅ์Šค๋‹˜ ๊ฐ์‚ฌํ•ด์š”โค๏ธ

 

์‚ฌ์šฉ ๊ธฐ์ˆ  ์Šคํƒ 

React ์— antd textarea์‚ฌ์šฉ

code sand box ์˜ˆ์‹œ์—์„œ๋Š” ์ผ๋ฐ˜ input๊ณผ textarea์— ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ์–ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

 

 

input์˜ ์ด๋ฒคํŠธ

onBlur

์š”์†Œ์— focus๊ฐ€ ํ—ค์žฌ๋˜์—ˆ์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ

 

onFocus

์š”์†Œ์— focus์‹œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ

 

onKeyPress 

๋ฌธ์ž ๊ฐ’์„ ์ƒ์„ฑํ•˜๋Š” ํ‚ค๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ 

๊ธฐ๊ธฐ ์˜์กด๋„๊ฐ€ ๋†’์•„ ํ˜„์žฌ๋Š” ๋”์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํ•œ๊ธ€ , ๊ธฐ๋Šฅํ‚ค ์ž…๋ ค ์‹œ ๋™์ž‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

 

onInput

input์˜ value ์†์„ฑ ๊ฐ’์ด ๋ณ€๊ฒฝ๋  ๋•Œ ๋ฐœ์ƒํ•˜๋Š”์ด๋ฒคํŠธ

 

onKeyDown

key๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ

 

onKeyUp

key๋ฅผ ๋ˆŒ๋ €๋‹ค๊ฐ€ ๋–ผ์—ˆ์„๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ

 

onChange

html์š”์†Œ๊ฐ€ ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ ์ฆ‰ focus ๋ฐœ์ƒ ์ „๊ณผ ํ›„๋ฅผ ๋น„๊ตํ•˜์—ฌ ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚ฌ์„ ๊ฒฝ์šฐ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ

 

 

input ์ด๋ฒคํŠธ ์‹ค์Šต

์•„๋ž˜์™€ ๊ฐ™์ด input์— ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ๊ณ  ๋ชจ๋“  ๊ฒƒ์— console์„ ์ฐ์—ˆ๋Š”๋ฐ์š”! 

์•„๋ž˜ ์ˆœ์„œ๋กœ ์ด๋ฒคํŠธ๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

โœจ onFocus  >>  onKeyDown  onKeyPress  >  onInput  >  onChange onKeyUp  > onBlur

 

      <input
        onBlur={onBlur}
        onFocus={onFocus}
        onKeyPress={onKeyPress}
        onKeyDown={onKeyDown}
        onInput={onInput}
        onKeyUp={onKeyUp}
        onChange={onChange}
      />

 

 

์•Œ๊ฒŒ๋œ ์†Œ์†Œํ•œ ์žฌ๋ฏธ์žˆ๋Š” ์‚ฌ์‹ค๋“ค

๐Ÿค” ํ•œ๊ธ€์€ ์˜๋ฏธ์žˆ๋Š” ๊ธ€์ž๊ฐ€ ์ž…๋ ฅ๋˜๋Š” ์‹œ์ ์—  input ์ด๋ฒคํŠธ๊ฐ€ ๋‘๋ฒˆ ๋ฐœ์ƒํ•œ๋‹ค.

"ํ•˜์ด"๋ฅผ ์ž…๋ ฅํ•œ๋‹ค๊ณ  ํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด ๋˜๋Š”๋ฐ ํ•œ๊ตญ์–ด๋Š” ์ž์Œ ๋ชจ์Œ์˜ ์กฐํ•ฉ์ด ํ•œ ๊ธ€์ž๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋‚˜์˜จ ํŠน์ด์„ฑ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ใ…Ž ์ž…๋ ฅ ์‹œ :  onKeyDown  >  onInput  >  onChange  >  onKeyUp 
  2. ํ•˜ ์ž…๋ ฅ์‹œ : onKeyDown  >  onInput  >  onChange  >  onKeyUp 
  3. ํ•˜ใ…‡ ์ž…๋ ฅ ์‹œ :  onKeyDown  >  onInput > onInput >  onChange  >  onKeyUp

 

๐Ÿค” ์—”ํ„ฐ ํ‚ค์™€ ๊ฐ™์ด ๋™์ž‘ํ‚ค๋ฅผ ๋ˆ„๋ฅด๋ฉด keyboard event๋งŒ ๋™์ž‘ํ•œ๋‹ค. (input x)

  1. onFocus
  2. onKeyDown
  3. onKeyPress
  4. onKeyUp
  5. onBlur

๐Ÿค” ํ‚ค๋ฅผ ๊พน ๋ˆ„๋ฅด๊ณ  ์žˆ์œผ๋ฉด keyboard event๊ฐ€ ๋ฐ˜๋ณต๋œ๋‹ค.

  1. keydown
  2. keypress
  3. keydown
  4. keypress
  5. <<์‚ฌ์šฉ์ž๊ฐ€ ํ‚ค๋ฅผ ๋†“์„ ๋•Œ๊นŒ์ง€ ๋ฐ˜๋ณต>>
  6. keyup

 

์ง์ ‘ ํ™•์ธํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ์ œ๊ฐ€ ๋งŒ๋“  code sandbox - Event.tsx ํŒŒ์ผ์„ ํ†ตํ•ด ํ™•์ธํ•ด๋ณด์„ธ์š”!

 

 

 

Textarea with character counting - antd@4.20.0-alpha.1 (forked) - CodeSandbox

Textarea with character counting - antd@4.20.0-alpha.1 (forked) by ink-0 using @ant-design/icons, antd, react, react-dom, react-scripts

codesandbox.io

 

๋Œ“๊ธ€