ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 모바일 웹 input 영역 이벤트 처리하기 & 동적 CLEAR버튼 만들기
      study/웹 2019. 5. 27. 15:19

      최종 결과, 코드는 맨아래에 있습니다.

       

      모바일웹(Mobile Web) input 영역 이벤트 처리하기 & 동적 CLEAR버튼 만들기 (특히 iOS 아이폰)

      모바일 웹에서는 input 영역에 값을 소프트웨어 키보드로 입력하게 된다. 따라서 크고 작은 문제가 발생했다.
      우선, input영역 옆에 input영역 값을 초기화 시켜주는 CLEAR 버튼을 만들고 싶었다.
      input영역에 값을 넣는 동안, 즉 활성화(focusin) 되어 있는 동안만 CLEAR버튼을 노출시키고,
      input영역에 입력을 하지 않는 동안은 CLEAR버튼을 노출 시키지 않는, 동적인(?) 버튼을 원했다.

       

       

      iOS의 키보드의 done 버튼

      iOS의 모바일 웹 키보드에서는 안드로이드와는 다른게 하나 있는데, 바로 done 버튼이다.

       

      굉장히 귀찮은 Done 버튼

      Done버튼의 이벤트 처리는 단 한가지 방법 밖에 없다. input영역에서 focusout하는 것, 하나로만 처리된다.
      Done버튼은 키를 입력한 것도 아니고, 영역을 터치한 것도 아닌, 오직 focusout만 하고, focusout으로만 인식 & 처리된다.
      즉, 동적 CLAER버튼은 focusin될 때만 visibility: visible되고, focusout에서 버튼을 visibility: hidden으로 한다.

       

      1
      2
      3
      4
      5
      6
      7
      $('#testInput').on('focusin',function(){
          $('#deleteButton').attr('style','visibility: visible');
      });
       
      $('#testInput').on('focusout', function(){
          $('#deleteButton').attr('style','visibility: hidden');
      });
      		 cs

       

       

      CLEAR버튼 이벤트 처리

      CLEAR 버튼의 이벤트처리를 click 혹은 tap 으로 이벤트처리를 할 경우, 두 이벤트는 input영역에 focusout보다 늦게 처리 된다.
      즉, 이벤트가 발생하기 전에 focusout으로 인해 버튼이 사라져서 이벤트 처리를 할 수가 없다.

       

      잘못된 사례: clear 전에 버튼이 먼저 사라지게 된다.

      이 문제를 해결하기 위해 CLEAR 버튼의 이벤트 처리를 touchstart로 바꿔야 한다.
      touchstart는 focusout보다 먼저 이벤트 인식이 되고, touchstart에서 input영역을 클리어 한 후, 다시 input영역에 focus() 한다.

       

      1
      2
      3
      4
      $('#deleteButton').on('touchstart', function() {
          $('#testInput').val('').focus();
          return false;
      });
      		 cs

       

       

      iOS 모바일 웹, 다른 영역 터치시 focusout 시키기

      iOS 모바일 웹에서는 또 귀찮게, focusin 상태에서, input영역 외의 영역을 터치시 focusin이 풀리지 않는 경우가 생겼다.
      따라서, 전체 영역에 focusin이 되는 동안은 전체 영역에 cursor: pointer를 넣어서, 모든 영역이 터치 및 클릭이 가능하게 만들어야 한다.
      주의 할 점은, input영역과 clear버튼 영역 터치 시에는, focusout되지 않게 해야한다.

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      $('#testInput').on('focusin',function(){
          // cusor: pointer 추가
          $('#wrap').attr('style','cursor: pointer');
          $('#deleteButton').attr('style','visibility: visible');
      });
       
      $(document).on('touchstart',function(e){
          var inputTxt = 'testInput'
          var del = 'deleteButton'
          var id = e.target.id
          if(id == inputTxt || id == del){
               // input과 버튼은 클릭되도 focusout되지 않게
          }else{
              // 포커스 아웃 시키기 
              document.activeElement.blur();
              // cusor: pointer 삭제
              $('#wrap').removeAttr('style');
          }
      });
      		 cs

       

      전체코드

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      <!doctype html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="/style.css">
          <title>TEST</title>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      </head>
      <body>
          <div id="wrap">
              <div class="title">
                  <span>MOBILE TEST</span>
              </div>
              <div class="content">
                  <input type='text' id="testInput" name ="testInput" class="input_text">
                  <button id= "deleteButton" type="button" class="delete_button">x</button>
              </div>
          </div>
      </body>
      <script>
              $('#testInput').on('focusin',function(){
                  // 포커스 in 일땐, wrap영역에 pointer를 달고, 버튼을 노출
                  $('#wrap').attr('style','cursor: pointer');
                  $('#deleteButton').attr('style','visibility: visible');
              });
              $('#testInput').on('focusout', function(){
                  // 포커스 out일땐, 버튼 숨기기
                  $('#deleteButton').attr('style','visibility: hidden');
              });
              $('#deleteButton').on('touchstart', function() {
                  // input영역 초기화 및 focus in
                  $('#testInput').val('').focus();
                  return false;
              });
              $(document).on('touchstart',function(e){
                  var inputTxt = 'testInput'
                  var del = 'deleteButton'
                  var className = e.target.id
                  if(className == inputTxt || className == del){
                  }else{
                      // input과 버튼외의 영역 터치시 focusout
                      document.activeElement.blur();
                      $('#wrap').removeAttr('style');
                  }
              });
             
      </script>
      </html>
      		 cs

       

       

      부록: style.css

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      #wrap{
          width: 300px;
          display: block;
          margin: 0 auto;
          position: relative;
      }
      .title{ 
          font-family: sans-serif;
          font-size: 22px;
          font-weight: bold;
          margin-top: 50px;
          margin-bottom: 20px;
      }
      .content{
      }
      .pointer{
          cursor: pointer
      }
      .input_text{
          border: 1px solid #99A3AC;
          font-size: 16px;
          padding: 10px;
      }
      .delete_button{
       
          font-family: sans-serif;
          width: 22px;
          height: 22px;
          border-radius:75px;
          margin: 8px;
          text-align: center;
          background-color:#99A3AC;
          visibility: hidden;
      }
      		 cs

       

       

    Designed by Tistory.

    티스토리툴바