히파루스의 솔직한 여행 이야기

전체 체크를 종종 쓸일이 있다.

더불어 check box를 클릭할때마다 특정 값을 hidden box에 넣어주는 코드를 넣어뒀다면 난감해진다.

동작하지 않기 때문이다.

        $("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".SCHOOLVISIT").prop("checked",true).change();;

} else {

//체크해제

$(".SCHOOLVISIT").prop("checked",false).change();;

}

})

전체 체크박스인 id가 ALLCHK를 클릭하면

SCHOOLVISIT라는 체크 박스가 토글되는 코드이다.

무척 단순한 코드

        $("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".SCHOOLVISIT").prop("checked",true);

} else {

//체크해제

$(".SCHOOLVISIT").prop("checked",false);

}

})

        $("#ALLCHK").click(function() {

if($("#ALLCHK").prop("checked")) {

$(".SCHOOLVISIT").prop("checked",true).change();

} else {

//체크해제

$(".SCHOOLVISIT").prop("checked",false).change();

}

})

            $(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").change(function(e) {

                e.preventDefault();

                if($(".A_ATTEND_SCHOOLVISITCHECK<%=i %>").is(":checked")){

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val($(this).val());

                    $(".A_ATTENDCD").eq(<%=i %>).val($(this).val());

                }else{

                    $(".A_ATTEND_SCHOOLVISIT").eq(<%=i %>).val('');

                    $(".A_ATTENDCD").eq(<%=i %>).val('');

                }

                $(".A_ATTENDRADIO<%=i %>:radio[value='']").prop("checked", true);

            }); 

Right(String(2, "0") & Month(date), 2)

6월이 아닌 06월로 나옴

이 코드 안쓰면

if LEN(month(date)) = 1 then

 어쩌구 저쩌구

end if 

가끔 라디오버튼 그룹이 여러번 반복될 경우

아래처럼 RADIO1그룹과 RADIO2그룹의 값을 각기 CODE에 넣어 저장하는일 말이다.

<input type="radio" name="RADIO1" class="RADIO1" value="1">

<input type="radio" name="RADIO1" class="RADIO1" value="2">

<input type="radio" name="RADIO1" class="RADIO1" value="3">

<input type="text" name="CODE" class="CODE">

<input type="radio" name="RADIO2" class="RADIO1" value="1">

<input type="radio" name="RADIO2" class="RADIO1" value="2">

<input type="radio" name="RADIO2" class="RADIO1" value="3">

<input type="text" name="CODE" class="CODE">

이 경우 asp든 jsp든 php든 라디오는 class로 접근하여 선택된 값을 획득 하되

CODE 텍스트박스의 경우 jquery의 eq를 사용하여 배열에 접근 후 선택된 radio button의 값을 넣어 사용 가능하다.

For i = 0 to 1

            $(".RADIO<%=i %>").on("change", function(e) {

                e.preventDefault();                

                $(".CODE").eq(<%=i %>).val($(this).val());

            });

Next

닝기미 뭔 생각으로 기본 video태그에 다운로드 버튼을 만들어놨는지

내 기가막혀서.. 구글 하는짓이 다 이러함 써글

상황은 이러하다

아이폰은 상관이 없지만 안드로이드 구글 브라우저의 크롬 버전을 각기 다르게 사용한다.

실제로 안드로이드 삼성갤럭시 원에서는 다운로드 버튼이 나오지 않지만 LG신형폰은 다운로드 버튼이 나온다.

이유는 구글 크롬 브라우저의 버전이 55 >= 부터 다운로드 버튼이 존재하기 때문이다.

망할

뭔 개똥같은 생각으로 크롬 엔진에 VIDEO TAG 다운로드 버튼을 만들어 놨는지 이녀석을 보이게 하거나 기능을 중지시키는 방법 자체가 존재하지 않라는 점.

공유도 좋지만 일반적으로 자사의 컨텐츠를 다운로드 되지 않길 바라는 회사가 수두룩하다.

그냥 다운로드 버튼만 누르면 음원이든 영상이든 다 다운받게 해놓는건 무슨 개수작인지!

다행히 해법은 두가지가 존재한다.

하나는 VIDEO TAG 시스템 컨트롤을 숨기고 그 자리에 커스텀 컨트롤을 만들어 붙이는 방법이고

다른 방법은 다운로드 버튼의 위치를 안보이게 밀어내버리는 방법이다.

결론부터 말하자면 커스텀 컨트롤을 만드는 방법은 특정 폰에선 커스텀 컨트롤 터치가 되지 않는 현상을 접하곤 GG

사실 이 커스텀 컨트롤을 만들어 붙이면 몇가지 난관이 존재한다.

바로 전체화면시 커스텀 컨트롤을 붙여야 한다란 점, VIDEO TAG가 전체화면 돌입시 최상단에 붙어버리는 점 등등 좀 귀찮다.

이제 본론인 후자의 방법 

즉 크롬 브라우저의 다운로드 버튼을 안보이게 밀어내버리는 방법을 설명하겠다.

사실 이 방법은 서양 형님들도 애용하는 방법이지만 난 이 방법 + 각 버전별 대응 방법을 가미한 내용을 공개하겠다.

난 착하니까 드래그도 될 수 있게 해뒀다.

한국인들 중 몇몇 (사실 다수) 바보들은 기술 포스팅에 드래그도 못하게 막아놓은 애들이 있는데...

에효.... 한심하다. 그렇게 살지 말자.. 차라리 비공개 포스팅으로 해둬라 웹 검색 힘들다.

전세계를 둘러봐라 누가 블로그에 드래그 막아놨나?

이제 정말 본론이다. CLASSIC ASP기준으로 설명하겠다.

나 PHP, JSP 모른다.

대신 VISUAL C++, OBJECTIVE C, VISUAL BASIC, ASP 할줄안다.

그러니 토달지 말아라

1. 안드로이드용 크롬 브라우저 USER AGENT를 살펴보면 이런식이다.

보이는가? 캔유씨? 

Chrome/51.0.2704.106 이부분이 바로 크롬 브라우저의 버전이다.

여기에서 원하는 부분 Chrome/51.0에서 51만 추출해 내겠다.

2. 원하는 부분인 크롬의 버전을 추출해내자

Dim strCromeVersion, strUserAgent, nCromePos, arrCromeVersion, nMoveDownloadButton

nMoveDownloadButton = "0" 'CSS용 기준 수치 설정:일단 0으로 해둠

strUserAgent = Request.ServerVariables("HTTP_USER_AGENT") 'USER AGENT추출

nCromePos = inStr(strUserAgent, "Chrome/") '아이폰은 크롬이 없을테니 크롬 문자열 위치를 확인

if nCromePos > 0 then

    arrCromeVersion = Split(mid(replace(strUserAgent, "Chrome/", ""), nCromePos, 30),".") '크롬 문자열이 존재한다면 문자열 자체를 날려버린 후 그 위치부터가 버전정보임

'사실 2~3자리만 추출해 내도 되지만 세상이 어찌 변할지 모르니 30자 여유롭게

    if ubound(arrCromeVersion) > 0 then '버전 정보를 . 을 기준으로 배열에 담았으므로 배열이 존재하는지 체크

        if cint(arrCromeVersion(0)) >= 55 then '첫번째가 버전 정보이므로 이 버전이 55이상인지 확인

            nMoveDownloadButton = "50" 'CSS용 기준 수치 저장

        end if

    end if    

end if

3. 이제 CSS로 가보자. 아래 스타일 부분이 핵심이다. 또한 width: calc(100% + <%=nMoveDownloadButton%>px); 여기보면 위에서 구한 밀어낼 픽셀 값이 들어있다.

만약 크롬55 이상 버전이면 VIDEO 컨트롤은 전체화면보기 버튼 다음에 다운로드 버튼이 존재한다.

하지만 그 이하 버전이라면 전체화면보기 버튼만 존재한다.

크롬 55이상 버전인 경우 다운로드 버튼이 나타날테니 50px 밀려서 저멀리 사라질 것이다.

그 이하 버전이라면 0px 밀어낼것이므로 전체화면으로 보기 버튼이 그대로 보여진다.

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>이히히</title>

<style>

    video::-internal-media-controls-download-button {

    display:none;

    }

    video::-webkit-media-controls-enclosure {

    overflow:hidden;

    }

    video::-webkit-media-controls-panel {

    width: calc(100% + <%=nMoveDownloadButton%>px);

    }   

</style>

</head>

4. 이걸로 끝~

웃기시네

구글 놈들이 참 사악하다.

VIDEO 영역을 길게 눌러봐라

팝업이 뜬다.

즉 CONTEXT MENU

윈도우로 따지자면 마우스 오른쪽 버튼처럼 뜨면서 다운로드 하실래예~ 뿌잉뿌잉 이지랄한다.

써글 졸라 귀찮다.

JAVASCRIPT의 힘을 빌리자

<video id="video" playsinline webkit-playsinline width="100%" height="auto" poster="videothumb.jpg" controls onclick="playPause();">

<source src="test.mp4" type="video/mp4" />

</video>

<script type="text/javascript">

$(document).ready(function() {

$('#video').bind('contextmenu', function() { return false; }); //VIDEO의 ID가 video임. contextmenu 나오면 false처리해주셈

});

</script>

5. 이걸로 진짜 끝이다.

아 욕나온다.

이틀동안 컨트롤 숨겨도 보고, 제어하는 방법 찾아 삼만리에 커스텀 컨트롤 만들어보고 오픈소스 붙여보며 삽질하다 정말 마지막 심정으로 버전별로 대응해볼까? 순간 생각이 들어 처리한게 적중했다.

jQuery로 TEXT 입력시 정규식으로 원하지 않는 문자열 입력 여부 체크하기

var regId;

regId = /^[A-Za-z0-9]{4,12}$/;

if (!regId.test($("#USERPWD").val())) {

    alert('비밀번호는 영문과 숫자 4~12자 이내로 입력하세요.');

    $("#USERPWD").focus();

    return false;

}

다른 정규식 예제들

이메일 형식 (AAA@DOMAIL.COM)

  /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/

주민번호, -까지 포함된 문자열로 검색

  /^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/

NUMBER (공백불가)

  /^[0-9]+$/

NUMBER, ALPHABET만 가능

  /^[a-zA-Z0-9]+$/;

한글만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 불가능

  /^[가-힣]+$/

ALPHABET만 가능 

  /^[a-zA-Z]+$/

한글과 ALPHABET만 가능

  /^[가-힣a-zA-Z]+$/

한글이나 영문만 가능한 상태에서 띄어쓰기도 가능하게 하려면 \s 만 추가시키면 됨

  /^[가-힣\s]+$/

  /^[a-zA-Z\s]+$/

핸드폰번호 형태 : 000-0000-0000

  /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/

도메인 형태 중 http:// https:// 반드시 포함

  /^((http(s?))\:\/\/)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

도메인 형태 중 http:// https:// 포함해도 되거나 안해도 되거나

  /^(((http(s?))\:\/\/)?)([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

도메인 형태, http:// https:// 포함하면 안되는 경우(사실상 존재할일이...)

  /^[^((http(s?))\:\/\/)]([0-9a-zA-Z\-]+\.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

<html>

.

.

.

<div id="BCONTENT">

아무런 내용 http://www.test.com 링크 이동하기

</div>

.

,

,

</html>

<script type="text/javascript">

    var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;

    function makeHTML(textNode) {

        var source = textNode.data;

        return source.replace(re, function() {

            var url = arguments[0];

            var a = $('<a></a>').attr({ 'href': url, 'target': '_blank' }).text(url);

            return url.match(/^https?:\/\/$/) ? url : $('<div></div>').append(a).html();

        });

    };

    function eachText(node, callback) {

        $.each(node.childNodes, function() {

            if (this.nodeType != 8 && this.nodeName != 'A') {

                this.nodeType != 1 ? callback(this) : eachText(this, callback);

            }

        });

    };

    function autolink(obj) {

        return obj.each(function() {

            var queue = [];

            eachText(this, function(e) {

                var html = makeHTML(e);

                if (html != e.data) {

                    queue.push([e, makeHTML(e)]);

                }

            });

            $.each(queue, function(i, x) {

                $(x[0]).replaceWith(x[1]);

            });

        });

    };

   $(document).ready(function() {

      autolink($("#BCONTENT")); 

    });

</script>

가끔씩 링크를 클릭하면 DIV를 숨겼다 보였다 토글 시킬 필요가 있다.

더불어 animation으로 위에서 아래로 반대로 아래에서 위로 보여주었다 숨기는 에니메이션도 추가

이를 jQuery로 다루는 코드이다.

<a href="#" id="btnAll" mode="hide">전체 보기</a>

<div id="ALLPRICE" style="display:none">

어쩌고 저쩌고 jquery 

</div>

<script type="text/javascript">

$(document).ready(function() {

$('#btnAll').click(function(e) {

e.preventDefault();

if ($(this).attr("mode") == "hide") {

$("#btnAll").text("전체 숨기기");

$('#ALLPRICE').slideDown(350);

$(this).attr("mode", "show");

} else {

$("#btnAll").text("전체 보기");

$('#ALLPRICE').slideUp(350);

$(this).attr("mode", "hide");

}

});

});

</script>