\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 TextInput \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n\r\n<\/gwc-label>\r\n \r\n<\/gwc-textinput>\r\n <\/div>\r\n \r\n<\/gwc-label>\r\n <\/gwc-textinput>\r\n <\/div>\r\n \r\n<\/gwc-label>\r\n <\/gwc-textinput>\r\n <\/div>\r\n \r\n<\/gwc-label>\r\n <\/gwc-textinput>\r\n <\/div> \r\n <\/gwc-button>\r\n<\/div>\r\n<\/pre>\n \uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n
\r\n.center {\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n gap: 1em;\r\n}\r\n\r\n.center div {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.2em;\r\n}\r\n\r\ngwc-textinput {\r\n width: 20em;\r\n}\r\n<\/pre>\njs \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nwindow.onload = () => {\r\n const onChange = (event) => {\r\n label.content = `${event.target.id}\uc758 \uac12: ${event.target.value}`;\r\n };\r\n\r\n textinput1.addEventListener(\"change\", onChange);\r\n textinput2.addEventListener(\"change\", onChange);\r\n textinput3.addEventListener(\"change\", onChange);\r\n textinput4.addEventListener(\"change\", onChange);\r\n\r\n button.addEventListener(\"click\", () => {\r\n const v1 = textinput1.value;\r\n const v2 = textinput2.value;\r\n const v3 = textinput3.value;\r\n const v4 = textinput4.value;\r\n\r\n gwcMessage(`\r\n textinput1: ${v1}
\r\n textinput2: ${v2}
\r\n textinput3: ${v3}
\r\n textinput4: ${v4}\r\n `);\r\n });\r\n};\r\n<\/pre>\n\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n