[Hybrid, Web] 키 입력시 숫자만 가능하도록 세팅. 오래만에 글 올리네요. 모바일 웹 그리고 일반적인 웹의 input tag 에서 키 입력 제어하는 방법입니다. 모바일 웹의 경우 type 으로 숫자키보드를 보이게 하거나, pattern 에 정규식을 넣어서 숫자를 제어하는 경우가 많습니다. 하지만! 가끔씩.....적용이 안되는 단말기가 있더군요. 특히 type의 경우 tel로 해놓아도 커스텀 키보드의 경우는 지원되지 않는 경우도 발생합니다. 키 입력시 자바스크립트로 제어 코드를 넣는다면 간단히 해결 가능합니다. 아래와 같은 input tag에.... onkeypress 이벤트에 validate 라는 function을 넣어주면 됩니다. function validate() { if (event.keyCode >=48 && event.keyCode 더보기 [Android, Hybrid]openFileChooser 킷캣에서 동작하지 않는 문제( openFileChooser Kitkat bug ) [2014.10.31] openFileChooser가 문제군요...ㅎ 코멘트 잘 읽어 보았습니다. 킷캣에서 파일업로드 버그는...웹적인 요소로 해결할 수 있는 방안은 없습니다. 그래서 이런방법도 있다는 것을 알려드리기 위해서 글을 쓴건데 더욱 혼란스럽게 해드린 것 같네요. 제가 아래 글에 빨간색으로 표시를 해뒀는데...이 방법은 파일에 대한 정보를 네이티브 단에 저장해 놓고 전송에 대한 이벤트를 받으면 NATIVE 단에서 서버로 전송하게 됩니다. 서버로 전송하는 부분은 각자 프로젝트에 맞게...직접 구현하셔야되구요. 멀티파츠로 전송하신다면 제 블로그 찾아보시면 네이티브에서 멀티파츠로 전송하는 방법이라고 있습니다. 그부분 참고하시면 됩니다. 아래 발췌된 부분은 참고용이지 복사 붙여넣기를 한다고해서 동작하는.. 더보기 [Android, Hybrid] JavascriptInterface 사용법. 아이폰의 경우 Native와 Web간의 통신을 위해서 scheme를 이용하지만 안드로이드에서는 JavascriptInterface를 이용하여 더욱 편하게 데이터를 주고 받을 수 있다. 예제로 간단한 Toast를 보여주는 인터페이스를 만들어 보겠다. 먼저 웹뷰에 추가 시킬 JavascriptInterface 클래스를 만든다. public class WebViewInterface { private WebView mAppView; private Activity mContext; /** * 생성자. * @param activity : context * @param view : 적용될 웹뷰 */ public WebViewInterface(Activity activity, WebView view) { mAppVie.. 더보기 [HTML5] audio, video tag 지원 유무 확인 if ( document.createElement("video").canPlayType ) {console.log("true")} //지원 else { console.log( "false" );} //미지원 더보기 [Javascript] html tag 내에 있는 데이터 제거. .replace(/^()([0-9a-zA-Z가-힣~!\#$^&*\=+|:;?"'\s]*)()$/, "$1$3") .replace(/(| 더보기 [Javascript] 정규식. 전화번호, 휴대폰 번호 추출. 검증 웹페이지를 제작시, 전화번호를 입력받는 화면이 있다.아래와 같은 화면... 운전자 연락처(숫자만 입력) (필수입력) 파라미터, 화면 디스플레이시 하이픈(-)을 요구할 때,정규식을 사용하면 편하다. //가운데가 4자리 "01012345678".replace(/^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?([0-9]{3,4})-?([0-9]{4})$/, "$1-$2-$3") //가운데가 3자리 "0101234567".replace(/^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?([0-9]{3,4})-?([0-9]{4})$/, "$1-$2-$3") 이렇게 정규식을 사용하면 가운데가 3자리든 4자리든 010-1234-5678, 010-123-4567 의 형태로 .. 더보기 [Javascript] 아이폰에서 브라우저 백버튼 클릭시 새로고침 안되는 문제. 크롬기반 브라우저 및 안드로이드에서는 브라우저 백버튼을 클릭하였을 때, 이전 페이지 정보를 refresh 한다.하지만 IOS 사파리의 경우 그렇지 않다.페이지에 대한 모든 정보를 사파리에서 저장하고 있기 때문이다.흔히 Hybrid App, Single Page Web 을 구현하게 되면(일반 web도 마찬가지...),간혹 로그인 체크라던가, 필요한 데이터를 받기 위해 document 의 ready에서 ajax를 통해 API들을 요청하게 된다. 하지만 아이폰(사파리)에서 브라우저 백버튼을 눌렀을 때, ready 내의 fuction이 정상 동작하지 않게 된다.이를 해결하기 위해선 window 객체의 onpageshow라는 이벤트를 구현해야 아이폰에서 브라우저 백버튼을 눌렀을 때도, 원하는 결과를 얻을 수 있다.. 더보기 [HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호출하기. 오랜만에 글쓰네요.요즘 하이브리드 웹을 많이 사용하시는데요.네이티브 코딩없이 카메라 호출하는 법에 대해 쓰겠습니다.안드로이드의 경우 2.2버전 이하는 카메라를 호출 할 수 없습니다.(4.0이상, 2.2 이하 에서만 확인해봤습니다.ㅠ 2.3단말기가 없어서)아이폰은...IOS 6 이상에서만 확인해 봤습니다.(아마 5이하는 안될듯 하네요)흔히 input file을 사용할때 type만 file로 옵션을 주는데요.이러면 lg단말기나, 베가 단말에서는 카메라 라는 항목이 보이지 않을 수 있습니다.(삼성은 카메라 라는 항목이 뜨더군요. 얼마나 뜯어 고친건지...;)하지만 또는 accept 에 파일 형식을 쓰고, capture 항목에 camera 라고 써주면 직접 카메라가 호출되는 것을 볼 수 있습니다.안드로이드의 경.. 더보기 [CSS] phone, tablet 구별하기(media query) Media Query에서 디바이스의 넓이를 구하기 위해서 사용되는 명칭은 두가지다.max-width 와 max-device-width 가 있는데 각각 다른 특징을 가진다.max-width 는 현재 웹뷰에서의 상대크기, 즉 device-ratio가 적용된 사이즈를 말한다.iphone5의 경우 device-ratio 는 2, 실 디바이스 넓이는 640pixel이다.하지만 max-width에는 320pixel로 대응된다.이말은 device-ratio(안드로이드에서의 density)가 현재 웹뷰에서 적용되는 1pixel의 크기와 동일하다고 볼 수 있다.max-device-width는 위와 반대로 실제 디바이스 넓이를 기준한다.ratio와는 상관없이 실제 픽셀의 기준을 적용시킨다는 의미다.나는 max-device.. 더보기 [jQuery] mobiscroll 에 타이틀 넣기. 센차에서는 datepicker를 자체 제공하지만, jQuery 에서는 따로 지원을 하지 않는다.그래서 mobiscroll을 많이 사용한다.jquery와 mobiscroll...하지만 mobiscroll에는 치명적인 단점이 있는데, picker 타이틀을 지원하지 않는다.그래서 core를 수정해 봤다. mobiscroll.core.jsLine : 675 html += '' + (s.display != 'inline' ? '' + '' + s.cancelText + '' + '' + s.titleText + '' + (s.button3 ? '' + s.button3Text + '' : '') + '' + s.setText + '' + '' : '') + ''; 위의 코드를 merge 하고, mobiscroll.. 더보기 이전 1 2 3 4 다음
