{"id":11319,"date":"2026-01-19T14:47:38","date_gmt":"2026-01-19T05:47:38","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11319"},"modified":"2026-01-19T14:47:38","modified_gmt":"2026-01-19T05:47:38","slug":"vue-js-%eb%aa%a8%eb%8b%ac-%ec%8a%a4%ed%81%ac%eb%a1%a4-%ec%8b%9c-input-blur-%ec%b2%98%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11319","title":{"rendered":"Vue.js \ubaa8\ub2ec \uc2a4\ud06c\ub864 \uc2dc Input Blur \ucc98\ub9ac"},"content":{"rendered":"<h1>Vue.js \ubaa8\ub2ec \uc2a4\ud06c\ub864 \uc2dc Input Blur \ucc98\ub9ac<\/h1>\n<p>\ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c \ubaa8\ub2ec \ub0b4\ubd80\uc758 <code>&lt;input&gt;<\/code> \ud544\ub4dc\uc5d0 \ud55c\uae00\uc785\ub825\uc911 \uc2a4\ud06c\ub864\uc744 \ub0b4\ub9b0 \ud6c4 \uc800\uc7a5 \ubc84\ud2bc\uc744 \ub204\ub974\uac8c \ub418\uba74, IME \uc785\ub825\uc0c1\ud0dc\ub97c \uc644\ub8cc\ud558\uae30 \uc704\ud574 \ub2e4\uc2dc <code>&lt;input&gt;<\/code> \ud544\ub4dc\ub85c \uc2a4\ud06c\ub864\uc774 \uc62c\ub77c\uac04 \uc774\ud6c4\uc5d0 \ud3ec\ucee4\uc2a4 \uc544\uc6c3\ub418\ub294 \uacbd\uc6b0\uac00 \uc788\ub2e4.(\uc800\uc7a5\uc2e4\ud328)<\/p>\n<p>\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 Input Blur \ucc98\ub9ac\ub97c \ud574\uc900\ub2e4.<\/p>\n<h2>\uad6c\ud604 \ubc29\ubc95<\/h2>\n<ol>\n<li>\uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \uc791\uc131<\/li>\n<\/ol>\n<pre><code class=\"language-javasctipt\">  const handleScroll = () =&gt; {\n    if (document.activeElement instanceof HTMLInputElement) {\n      document.activeElement.blur()\n    }\n  }<\/code><\/pre>\n<ol start=\"2\">\n<li>\uc2a4\ud06c\ub864 \uc601\uc5ed\uc5d0 \uc774\ubca4\ud2b8 \ubc14\uc778\ub529<\/li>\n<\/ol>\n<pre><code class=\"language-javasctipt\">  &lt;template&gt;\n    &lt;div class=&quot;modal-overlay&quot;&gt;\n      &lt;div class=&quot;modal-content&quot; @scroll=&quot;handleScroll&quot;&gt;\n        &lt;!-- \ubaa8\ub2ec \ub0b4\uc6a9 --&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/template&gt;<\/code><\/pre>\n<p>\ucf54\ub4dc \uc124\uba85<\/p>\n<ul>\n<li>document.activeElement: \ud604\uc7ac \ud3ec\ucee4\uc2a4\ub41c DOM \uc694\uc18c\ub97c \ubc18\ud658<\/li>\n<li>instanceof HTMLInputElement: \ud3ec\ucee4\uc2a4\ub41c \uc694\uc18c\uac00 input\uc778\uc9c0 \ud655\uc778<\/li>\n<li>\n<p>.blur(): \ud574\ub2f9 \uc694\uc18c\uc758 \ud3ec\ucee4\uc2a4 \ud574\uc81c<\/p>\n<p>\ud655\uc7a5: select, textarea \ud3ec\ud568<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"language-javasctipt\">  const handleScroll = () =&gt; {\n    const active = document.activeElement\n    if (\n      active instanceof HTMLInputElement ||\n      active instanceof HTMLSelectElement ||\n      active instanceof HTMLTextAreaElement\n    ) {\n      active.blur()\n    }\n  }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Vue.js \ubaa8\ub2ec \uc2a4\ud06c\ub864 \uc2dc Input Blur \ucc98\ub9ac \ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c \ubaa8\ub2ec \ub0b4\ubd80\uc758 &lt;input&gt; \ud544\ub4dc\uc5d0 \ud55c\uae00\uc785\ub825\uc911 \uc2a4\ud06c\ub864\uc744 \ub0b4\ub9b0 \ud6c4 \uc800\uc7a5 \ubc84\ud2bc\uc744 \ub204\ub974\uac8c \ub418\uba74, IME \uc785\ub825\uc0c1\ud0dc\ub97c \uc644\ub8cc\ud558\uae30 \uc704\ud574 \ub2e4\uc2dc &lt;input&gt; \ud544\ub4dc\ub85c \uc2a4\ud06c\ub864\uc774 \uc62c\ub77c\uac04 \uc774\ud6c4\uc5d0 \ud3ec\ucee4\uc2a4 \uc544\uc6c3\ub418\ub294 \uacbd\uc6b0\uac00 \uc788\ub2e4.(\uc800\uc7a5\uc2e4\ud328) \uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 Input Blur \ucc98\ub9ac\ub97c \ud574\uc900\ub2e4. \uad6c\ud604 \ubc29\ubc95 \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \uc791\uc131 const handleScroll = () =&gt; { if\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11319\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-11319","post","type-post","status-publish","format-standard","hentry","category-language"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11319"}],"version-history":[{"count":1,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11319\/revisions"}],"predecessor-version":[{"id":11320,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11319\/revisions\/11320"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}