๐Ÿ”– Snippets/Javascript

[javaScript] keydown ์ด๋ฒคํŠธ ์ถ”๊ฐ€ & ์ค‘๋ณต ์ด๋ฒคํŠธ ๋ฐœ์ƒ ๋ฐฉ์ง€

2021. 5. 13. 18:58
๋ฐ˜์‘ํ˜•

์•ˆ๋…•ํ•˜์„ธ์š”, ์ด๋ฒˆ์—๋Š” javaScript์—์„œ input ํƒœ๊ทธ์— enter ํ‚ค๊ฐ€ ๋ˆŒ๋ ธ์„ ๋•Œ ์ฒ˜๋ฆฌํ•  keydown ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ,  ์ค‘๋ณต ์ด๋ฒคํŠธ ๋ฐœ์ƒ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

html ์ฝ”๋“œ :

<input type="text" id="todo_input" placeholder="insert title..">

 

js ์ฝ”๋“œ :

$(function() {
		
	// 	.... ์ƒ๋žต
    
    var keydown = false;    // ์ค‘๋ณต ๋ฐœ์ƒ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ๋ณ€์ˆ˜
    const $input = document.getElementById('input-title');	// id๊ฐ’์œผ๋กœ htmlElement ์ฐพ๊ธฐ
    
    // ํ•ด๋‹น element์— addEventListener ์ถ”๊ฐ€
    $input.addEventListener('keydown', function (e) {
        if (keydown) return;	// keydown์„ ํ–ˆ๋‹ค๋ฉด ์ข…๋ฃŒ.
        else {
            // key๊ฐ€ Enter์ด๊ณ , ๋นˆ์นธ ์ž…๋ ฅ์ด ์•„๋‹ ๋•Œ ์‹คํ–‰!
            if (e.key == 'Enter') {
                keydown = true;     // ์—”ํ„ฐํ‚ค๊ฐ€ ๋ˆŒ๋ ธ๊ณ , ๋นˆ์นธ ์ฒดํฌ๋„ ์™„๋ฃŒํ–ˆ์„ ๋•Œ, true๋กœ ๊ฐ’์„ ์ค˜์„œ ์ค‘๋ณต ์‹คํ–‰ ๋ฐฉ์ง€!
                $.ajax({
                    url: 'http://localhost:8080/title',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        title: $('#' + $input.id).val()
                    }),

                    success: function (result) {
                        console.log(result);
                        addTodo(result);
                        $('#input-title').val(''); // input ๊ณต๋ฐฑ์œผ๋กœ ์ดˆ๊ธฐ
                        keydown = false;	// ๋‹ค์‹œ keydown ๋ณ€์ˆ˜ ์ดˆ๊ธฐํ™”
                    }
                });
            }
        }
    });
    
    //...
});

boolean ํƒ€์ž… keydown ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค.  keydown ๋ณ€์ˆ˜๋ฅผ ์„ค์ •ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ์ค‘๋ณต ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค!

๋จผ์ € keydown ๋ณ€์ˆ˜๋ฅผ false๋กœ ์„ค์ •ํ•ด์ค€ ๋‹ค์Œ, enterํ‚ค๋ฅผ ๋ˆŒ๋ €๋‹ค๋ฉด ๊ทธ๋•Œ! keydown ๋ณ€์ˆ˜๋ฅผ true๊ฐ’์œผ๋กœ ์„ค์ •ํ•ด์ค˜์„œ ์ถ”๊ฐ€๋กœ ์—”ํ„ฐํ‚ค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์š”์ฒญ์„ ์ฒ˜๋ฆฌ ์™„๋ฃŒํ–ˆ๋‹ค๋ฉด, ๋‹ค์‹œ keydown ๋ณ€์ˆ˜๋ฅผ false๋กœ ์ดˆ๊ธฐํ™” ํ•ด์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค!! 

๊ทธ๋Ÿผ ๋!

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)
'๐Ÿ”– Snippets/Javascript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • JS์—์„œ ๊ฐ์ฒด์— function์„ ์„ ์–ธํ•ด์•ผ ํ•˜๋Š” ์ด์œ (feat. ์ „์—ญ ๋ณ€์ˆ˜ ์ถฉ๋Œ)
  • [javaScript] Drag & Drop
iseunghan
iseunghan
๊พธ์ค€ํ•˜๊ฒŒ ์—ด์‹ฌํžˆ..
iseunghan
iseunghan

๊ณต์ง€์‚ฌํ•ญ

  • ์–ด์ œ๋ณด๋‹ค ๋‚˜์€ ์˜ค๋Š˜์ด ๋˜๊ธฐ ์œ„ํ•ด ๐Ÿ”ฅ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (261)
    • ๐Ÿ’ Spring (14)
      • ๊ฐœ๋… ๋ฐ ์ดํ•ด (2)
      • Spring ํ•ต์‹ฌ ๊ธฐ์ˆ  (24)
      • Spring REST API (8)
      • Spring MVC, DB ์ ‘๊ทผ ๊ธฐ์ˆ  (7)
      • Spring Security (23)
      • Spring in Action (1)
    • ๐ŸŒป JAVA (84)
      • ์ž๋ฐ” ORM ํ‘œ์ค€ JPA ํ”„๋กœ๊ทธ๋ž˜๋ฐ (20)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜, ์ž๋ฃŒ๊ตฌ์กฐ (13)
      • ๋””์ž์ธ ํŒจํ„ด (7)
      • ์ •๋ฆฌ์ •๋ฆฌ์ •๋ฆฌ (43)
      • JUnit (1)
    • ๐Ÿ”– Snippets (3)
      • Javascript (3)
    • โš™๏ธ Devops (22)
      • โ› Git (11)
      • ๐Ÿณ Docker (6)
      • ๐Ÿง Linux (3)
      • ๐ŸŒˆ Jenkins (1)
      • ๐Ÿ“ฌ Kafka (1)
    • ๐Ÿ’ฌ ETC.. (4)
      • ๐Ÿ’ป macOS (2)
    • ๐ŸŒง๏ธ ORM (2)
      • JPA (2)
    • ๐Ÿ Python (2)
    • ๐Ÿ“š Databases (15)
      • ์˜ค๋ผํด๋กœ ๋ฐฐ์šฐ๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๊ฐœ๋ก ๊ณผ ์‹ค์Šต(2ํŒ) (3)
      • RealMySQL 8.0 (8)
    • ๐Ÿ”ฅ Computer Science (5)
      • ๐Ÿ“ก ๋„คํŠธ์›Œํฌ (5)
    • ๐Ÿท๏ธ ํ˜‘์—… (1)
    • ๐Ÿ“œ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ (38)
      • BAEKJOON\์ˆ˜ํ•™ 1, ์ˆ˜ํ•™ 2 (8)
      • BAEKJOON\์žฌ๊ท€ (5)
      • BAEKJOON\๋ธŒ๋ฃจํŠธ ํฌ์Šค (3)
      • BAEKJOON\์ •๋ ฌ (1)
      • BAEKJOON\๋ฐฑํŠธ๋ž˜ํ‚น (5)
      • BAEKJOON\BFS, DFS (6)
      • BAEKJOON\์ด๋ถ„ํƒ์ƒ‰ (1)
      • BAEKJOON\๋‹ค์ด๋‚˜๋ฏน ํ”„๋กœ๊ทธ๋ž˜๋ฐ (9)
      • BAEKJOON\๊ทธ๋ฆฌ๋”” ์•Œ๊ณ ๋ฆฌ์ฆ˜ (0)
    • โœจ ISEUNGHAN (1)

์ธ๊ธฐ ๊ธ€

์ตœ๊ทผ ๊ธ€

์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
๋ฐ˜์‘ํ˜•
hELLO ยท Designed By ์ •์ƒ์šฐ.
iseunghan
[javaScript] keydown ์ด๋ฒคํŠธ ์ถ”๊ฐ€ & ์ค‘๋ณต ์ด๋ฒคํŠธ ๋ฐœ์ƒ ๋ฐฉ์ง€
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.