자바스크립트 입력 양식 제어 – SAPUI5 기초

자바스크립트 입력 양식 – 대표적으로 버튼, 글자, 선택상자, 체크박스 및 라디오 버튼 등이 있습니다.

이러한 입력 양식은 사용자에게 입력받은 데이터를 처리하도록 하는 객체로써, 웹브라우저 클라이언트 사용자에게 자바스크립트를 통해 데이터를 전달하게 하여 원하는 내용을 직접 받고자 할 때 사용되는 양식입니다.

대표적으로 회원가입시 다양한 형태로 자바스크립트 입력 양식이 사용됩니다. 아이디/패스워드 입력을 위한 input text, 남성/여성을 선택할 수 있는 라디오 버튼, 각종 정보 동의 사항에서 사용되는 체크박스 등등이 사용이 됩니다.

자바스크립트 입력 양식 – input text, text Aarea

자바스크립트 input 처리와 관련하여 대표적으로 input text, text area, 등이 있습니다.

다음과 같은 html 코드 형태로 사용되게 됩니다.

<input type="text" id=" " value=" ">
<textarea name="" id="" cols="30" rows="10">

input text 태그는 일반적으로 한줄 입력이 필요한 경우 사용을 하고, Text Area의 경우에는 여러 줄 입력이 필요한 경우에 사용을 하게 됩니다.

 

텍스트 input 값 읽어오기

텍스트 input 값은 value 속성을 사용하여 값을 가져올 수 있습니다.

<html lang="ko">
  <head> </head>
  <body>
    <input type="text" />
    <input type="button" value="영어로" id="tranButton1" />
    <p>결과 :</p>
 
    <script>
      const input = document.querySelector("input");
      const tranButton = document.querySelector("#tranButton1");
      const pTag = document.querySelector("p");
 
      tranButton.addEventListener( "click", () => {
        if ( input.value === "남자" ){
          pTag.textContent = "male";
        }else if( input.value === "여자"){
          pTag.textContent = "female";
        }
      })
    </script>
  </body>
</html>

 

text 입력시 keyup, keydown, keypress 이벤트의 의미

텍스트 객체의 키 입력시, 이벤트는 다음과 같은 순서로 발생을 하게 됩니다.

Key Down → Key Press → Key Up

키를 누르게 되면 Key Down 이라는 이벤트가 발생하게 되고, 이어서 뭘 눌렀는지 인식시점에 Key Press 이벤트가 발생합니다. 이 시점에서 text 객체에 값이 들어가게 됩니다

따라서 모두 입력된 내용을 가져오고자 할 때에는 key Up 이벤트를 사용해야 합니다.

<html lang="ko">
  <head> </head>
  <body>
    <input type="text" />
    <!-- <input type="button" value="영어로" id="tranButton1" /> -->
    <p id="pid1">keydown 결과 :</p>
    <p id="pid2">keyup 결과 :</p>
 
    <script>
      const input = document.querySelector("input");
      const pTag1 = document.querySelector("#pid1");
      const pTag2 = document.querySelector("#pid2");
 
      input.addEventListener( "keydown", () => {
        //키 다운 이벤트에서는 모든 입력된 결과를 가져오지 못함
        pTag1.textContent = "keydown 결과 : " + input.value + "입니다.";
      })
 
      input.addEventListener( "keyup", () => {
        //입력된 모든 텍스트 value는 keyup 이벤트에서 처리해야함
        pTag2.textContent = "keyup 결과 : " + input.value + "입니다.";
      })
    </script>
  </body>
</html>

keydown의 결과와 keyup의 결과는 아래의 그림과 같이 달리 보여지게 되는데, 텍스트 입력과 관련된 이벤트 발생 시점 차이라 할 수 있습니다.

KEYDOWN, KEYUP의 결과차이

여러 줄을 입력하는 textarea 역시 사용법은 비슷합니다.

<html lang="ko">
  <head> </head>
  <body>
    <textarea name="" id="textarea1" cols="30" rows="10">
      TEXT AREA
    </textarea>
    <p>결과 :</p>
    <script>
      const texta = document.querySelector("#textarea1");
      const pTag = document.querySelector("p");
      texta.addEventListener("keyup", () => {
        pTag.textContent = "결과 : " + texta.value;
      });
    </script>
  </body>
</html>

input text와 동일하게 value 값을 통해 입력값을 가져올 수 있습니다.

textarea도 input text와 마찬가지로 value 속성을 통해 값을 가져올 수 있음

 

자바스크립트 입력 양식 선택상자(SELECT) 입력 받기

SELECT는 미리 정해진 값 들 중에서만 입력받도록 강제한 형태의 입력방식 입니다.

해당 폼에서 특정 값의 세트만을 입력받아야만 한다면 선택상자 SELECT를 사용하면 됩니다.

SELECT, OPTION 태그로 선택상자를 구성할 수 있습니다.

<html lang="ko">
  <head> </head>
  <body>
    <select name="sel01" id="sel01">
      <option value="1" >봄</option>
      <option value="2">여름</option>
      <option value="3" selected>가을</option>
      <option value="4">겨울</option>
    </select>
    <script>
          const pTag1 = document.createElement( "p" );
          pTag1.textContent = "선택결과(value) : ";
          document.body.appendChild( pTag1 );
          const pTag2 = document.createElement( "p" );
          pTag2.textContent = "선택결과(텍스트) : ";
          document.body.appendChild( pTag2 );
          const sel01 = document.querySelector( "#sel01" );
 
          //select 선택상자의 change 이벤트를 사용
          sel01.addEventListener( "change", ( event ) => {
            //위에서 설정한 봄, 여름, 가을, 겨울 option을 가져옴
            const selOptions = event.currentTarget.options;
            // 선택한 option의 index를 설정
            const selected = selOptions.selectedIndex;
            //value를 가져옴
            pTag1.textContent = `선택결과(value) : ${ selOptions[selected].value} 입니다. ` ;
            //선택한 텍스트의 값을 가져옴
            pTag2.textContent = `선택결과(텍스트) : ${ selOptions[selected].textContent} 입니다. ` ;
          })
    </script>
  </body>
</html>

selectedIndex를 통해 선택한 순번(index)를 선택상자로부터 가져오게 되며, currentTarget.options에서 모든 선택상자의 option 요소를 가져오게 됩니다. 가져온 모든 option 요소에 index를 적용하여 (options[index]) 선택된 값을 가져올 수 있습니다.

선택상자에서 값을 선택하면 다음과 같이 value와 텍스트 값을 얻을 수 있음 - 자바스크립트 입력 양식 선택상자

 

자바스크립트 입력 양식 – 체크 박스 입력

체크박스는 어떠한 속성값이 true, false 만을 갖게 될 때 사용하는 입력 객체입니다. 예컨대 회원가입시 정보 동의 여부를 입력받을 때 사용됩니다.

<input type="checkbox" name="chk1">체크 박스</label>

라디오박스는 여러 속성값 중 하나만을 선택헤야 할 때 사용하는 입력 객체입니다. 회원가입시 남성/여성 둘 중에 하나를 선택하는 경우 등에 사용됩니다.

라디오 박스는 하나의 그룹을 동일한 name으로 관리하게 되므로 name을 반드시 입력해주어야 합니다.

<html lang="ko">
  <head> </head>
  <body>
    <input type="checkbox" name="chk1" >
    체크 박스</label><br>
    <!-- value 값에도 지정해 주어 선택된 항목을 value로부터 -->
    <input type="radio" name="radiogrp1" value="초등학교"> 초등학교<br>
    <input type="radio" name="radiogrp1" value="중학교"> 중학교<br>
    <input type="radio" name="radiogrp1" value="고등학교"> 고등학교<br>
    <input type="radio" name="radiogrp1" value="대학교"> 대학교<br>
    <p id="pTag1">체크 결과 : </p>
    <p id="pTag2">라디오 결과 : </p>
    
    <script>
      const chkbox = document.querySelector("input[type=checkbox][name=chk1]");
      // 라디오 박스인 경우에는 여러개를 가져와야 하므로 querySelectAll을 사용해야 한다.

      const radio = document.querySelectorAll("input[type=radio][name=radiogrp1]");
      const pTag1 = document.querySelector("#pTag1");
      const pTag2 = document.querySelector("#pTag2");
 
      chkbox.addEventListener( "change", () => {
        // 체크박스의 checked 변수를 통해 체크 여부를 확인함
        if ( chkbox.checked ){
          pTag1.textContent = "체크 결과 : 체크됨"
        }else{
          pTag1.textContent = "체크 결과 : 언체크됨"
        }
        // pTag1.textContent = "" 
      })
 
      //라디오 객체를 돌면서 이벤트 차례대로 연결
      radio.forEach( (item) =>{
        item.addEventListener( "change", ( event ) =>{
          pTag2.textContent = "라디오 결과 : " + event.currentTarget.value;
        })
      })
    </script>
  </body>
</html>

체크박스 및 라디오 박스 모두 이벤트 리스너로 change 이벤트로 등록을 해주면 됩니다.

체크박스와 라디오박스 자바스크립트 입력 양식

체크박스의 경우, 해당 객체 변수 checked 를 확인하여 값을 처리할 수 있으며, 라디오박스의 경우에는 해당 요소의 값이 복수로 존재하므로, foreach 문을 활용해서 각 item을 반복하며 이벤트 리스너를 등력해 줍니다.

이상으로 기본적인 자바스크립 입력 양식 에 대해서 알아보았습니다. 더 많은 입력 요소에 대한 상세한 내용은 모질라 문서 이곳에서 확인해 보시기 바랍니다.

자바스크립트의 입력 양식 중 하나인 버튼에 대해서는 다음의 글을 참고하실 수 있습니다.