2013. 11. 11.

안드로이드 기본 브라우저와 크롬. fieldset 라디오 버튼 onchage 이벤트 차이.

웹페이지를 안드로이드 내장 기본 브라우저와 크롬에서 테스트 하는데, 어느 한쪽에서 이벤트가 발생하지 않는 일이 생겨 좀 찾아봤습니다. 관련 부분은 언제나 그렇듯 간단한 녀석.
<fieldset onchange="myFunc();" >

    <input type="radio" name="RB" id="a" value="value_a"/>
    <label for="a">a</label>

    <input type="radio" name="RB" id="b" value="value_b"  />
    <label for="b">b</label>

</fieldset>
myFunc()의 함수에는 간단하게 alert()으로 현재 선택된 라디오 버튼의 value를 출력해 주는 것이라 가정 합니다.

크롬에서는 라디오 버튼을 조작할때 마다 정상적으로 myFunc()가 호출 됩니다. 그러나 안드로이드 기본 내장 브라우저에서는 도통 응답이 없네요. fieldset 태그를 안드로이드 기본 브라우저에서 100% 지원하지 않는 것 같아서 이런 저런 이벤트 함수를 넣어서 확인해 봤습니다.

disable="disable" 속성을 추가해 봤는데, 크롬에서 정상적으로 disable 비활성화가 됐으나 안드로이드 기본 브라우저는 아무런 반응이 없습니다. 안드로이드 기본 브라우저에서 fieldset 태그를 완전히 배제한 것일까요.

onmouseup()의 경우에는 두 브라우저 모두 반응이 없습니다만, onmousedown()의 경우는 안드로이드 기본 브라우저에서만 이벤트가 발생 합니다. 하하 거참 햇갈리네요.  모바일 웹뷰에서의 터치 이벤트가 HTML의 어떤 이벤트로 전달 되는지 궁금 하네요.

브라우저마다 조금씩 다른건 별 수 없습니다만 신경쓰이는 것도 별 수 없나 봅니다.
http://www.w3schools.com/tags/tag_fieldset.asp
http://www.w3schools.com/tags/ref_eventattributes.asp

결국 fieldset은 별 쓸모 없이 붙어 있게 되었고, 이벤트는 아래와 같이 처리 했습니다. input 태그에서 onchage 속성은 두 브라우저 모두 동일하게 반응 하더군요.
<fieldset>

  <input onchange="myFunc();" type="radio" name="RB" id="a" value="value_a"/>
  <label for="a">a</label>

  <input onchange="myFunc();" type="radio" name="RB" id="b" value="value_b"/>
  <label for="b">b</label>

</fieldset>
http://www.w3schools.com/tags/ev_onchange.asp

* 아, 그리고 위에서 확인했던 이벤트 onmouse*() 함수들은 같은 크롬이라도 모바일과 데스트탑이 결과가 다릅니다. 확인할 엄두가 안나서 포기...

* 안드로이드 4.4(kitkat) 부터는 기본 내장 브라우저가 크롬이 된다고 합니다. 모바일 브라우저 종류도 많은데 한 가지라도 준다고 하니 그건 마음에 드네요.
http://www.android.com/versions/kit-kat-4-4/

댓글 없음 :

댓글 쓰기