[html] Dom 돔 마우스 이벤트 무시, 제거, 비활성화

Posted by Find my true self Fimtrus
2018. 2. 28. 17:13 Programming/Web

웹 화면에 로고와 같이 화면에는 보여야 하지만 클릭이 되지 않아야 하는 뷰가 있을 경우.


아래와 같이 style을 적용시키면 해당 화면에 대한 마우스 이벤트는 사라지게 된다.


pointer-events: none;


HTML 코어에서 정의된 마우스와 관련된 이벤트를 비활성화한다.

이 댓글을 비밀 댓글로
  1. 잘보고갑니다~

[jQuery] 제이쿼리에서 아이템 동적 추가후 스타일 적용 문제(select, listview 등)

Posted by Find my true self Fimtrus
2017. 5. 11. 09:04 Programming/Web

리스트뷰에만 해당하는 것은 아니고, 모든 jquery 위젯에 해당하는 문제인데,

아이템들을 동적 추가하면 jquery에서 자동으로 추가하는 class 들이 해당 dom에 추가되지 않는다.

jquery는 html 화면을 불러들일 때, html을 파싱해서 각각 태그에 맞게 클래스를 추가하게 된다.

dom을 동적으로 추가할 경우, 이 로직을 타지 않기 때문에 jquery 스타일이 적용되지 않는다.

이 문제를 해결하기 위해서는 1줄만 추가해주면 된다.

- listview
$jqueryObject.listview('refresh')

- select
$jqueryObject.selectmenu('refresh')


동적 추가후 화면이 제대로 적용이 되지 않는다면!

refresh를 꼭 해주자!


이 댓글을 비밀 댓글로

[HTML] a 태그에 이미지가 보이지 않는다면

Posted by Find my true self Fimtrus
2017. 5. 11. 08:54 Programming/Web

a 태그에 이미지를 넣을 경우, 사이즈가 0으로 잡혀 이미지가 보이지 않는다.


스타일에 display:block; 을 지정하게 되면 정상적으로 이미지가 보이게 된다.



이 댓글을 비밀 댓글로

[Hybrid, Web] 키 입력시 숫자만 가능하도록 세팅.

Posted by Find my true self Fimtrus
2016. 6. 10. 15:05 Programming/Hybrid App

오래만에 글 올리네요.


모바일 웹 그리고 일반적인 웹의 input tag 에서 키 입력 제어하는 방법입니다.


모바일 웹의 경우 type 으로 숫자키보드를 보이게 하거나, pattern 에 정규식을 넣어서 숫자를 제어하는 경우가 많습니다.


하지만! 가끔씩.....적용이 안되는 단말기가 있더군요. 특히 type의 경우 tel로 해놓아도 커스텀 키보드의 경우는 지원되지 않는 경우도 발생합니다.


키 입력시 자바스크립트로 제어 코드를 넣는다면 간단히 해결 가능합니다.


아래와 같은 input tag에....


<input type="tel" title="TEST용" style="width:100%; ime-mode:disabled;" maxlength="13" onkeypress="validate(event)">


onkeypress 이벤트에 validate 라는 function을 넣어주면 됩니다.


function validate() {
	if (event.keyCode >=48 && event.keyCode <= 57 ) {
		return true;
	} else {
		event.returnValue = false;
	}
}


keyCode 48~57까지가 0~9이므로, 숫자가 입력 되었을 경우, 정상적으로 동작하고,


그 이외 코드가 들어 왔을때는 returnValue를 false로 줌으로써 해당 키 입력 이벤트에 대한 값을 무시해 버립니다.


이렇게 해서 간단하게 제어가 가능합니다.



이 댓글을 비밀 댓글로

[Javascript,Java]ReplaceAll 에서 점, dot(.) 문제 해결하기.

Posted by Find my true self Fimtrus
2015. 10. 8. 15:37 Programming/Web

자바스크립트에는 replaceAll이 존재하지 않는데 기본으로 제공하는 것처럼 포스팅 했군요.


 replaceAll 관련 function을 추가하는 포스팅을 했었는데요.


관련 페이지를 첨부합니다.


[Javascript] 자바스크립트에서 replaceAll 하기 (Click!)


======================================================================================


자바스크립트에서 replace를 사용하였을때 점(.)이 다른 문자로 잘 치환되나,


replaceAll을 사용하였을 경우 모든 문자로 인식하는 문제점이 있다.


물론 자바에서도 마찬가지 인데, 간단하게 아래와 같이 사용하면 점(.)을 다른 문자로 치환할 수 있다.



//replaceAll 테스트
"2015.10.08".replaceAll("\\.", "/");


엔터 위에 있는 원 통화 표시 문자를 두개 넣고, 점( .) 을 입력하면,


"2015.10.08"  이 "2015/10/08"로 정상적으로 변환된다.



이 댓글을 비밀 댓글로

[Javascript] 커스텀 이벤트 만들기.

Posted by Find my true self Fimtrus
2014. 10. 31. 15:22 Programming/Web

jQuery의 경우 trigger를 통해 간단하게  커스텀이벤트를 만들 수 있다.


하지만 실제로는 약간은...복잡한 형태로 되어 있다.


- 샘플코드

var customEvent;

if (document.createEvent) {
	
	customEvent = document.createEvent("HTMLEvents");
	customEvent.initEvent("fimtrus", true, true);
} else {
	customEvent = document.createEventObject();
	customEvent.eventType = "fimtrus";
}

if (document.createEvent) {
	mtk.now.inputObj.dispatchEvent(customEvent);
} else {
	mtk.now.inputObj.fireEvent("on" + event.eventType, event);
}


위의 코드를 보면 createEvent의 존재유무로 분기를 하고 있다.


createEvent가 존재하지 않을 경우 Internet Explorer 기반의 브라우저를 사용하고 있는 것이고,


createEvent가 존재할 경우 웹킷 기반(크롬, 사파리 등.. 오페라나 파폭은 확인못해봤음...)의 브라우저를 사용하고 있다는 것이다.


익스플로러와 다른 브라우저 간의 제공 메소드가 다르기 때문에 


모든(대부분) 브라우저를 지원하기 위해서는 위와 같이 만들어야 한다.



샘플 코드를 보면 fimtrus 라는 이벤트를 만들었고 


두번째 분기문에서 해당 dom 에 이벤트를 보내게 되면 dom에 지정되어 있는 이벤트 리스너가 동작하게 된다.



만약..jQuery를 사용한다면 그냥 간단하게 한줄로...


$(dom).trigger('fimtrus') 


결론은...jQuery를 사용하면 편리하다!ㅎ




이 댓글을 비밀 댓글로
    • ㅁㅎㅁ
    • 2015.10.07 02:00
    예제가 없어서 불편

[Javascript] get으로 넘어온 파라미터를 Object 형태로 변환

Posted by Find my true self Fimtrus
2014. 10. 21. 13:38 Programming/Web

아래와 같이 데이터가 주소에 포함되어 있을 때,


하나하나 꺼내오려면 상당히 귀찮다(어렵진 않지만...)


http://fimtrus.tistory.com/1?data1=123&data2=1234


화면이 로딩되는 시점에서 아래 function을 넣어주면 


주소에 포함되어 있는 파라미터 값들을 편하게 들고 올 수 있다.



/**
 * @author jonghyun.jeong
 * @since 2014.04.01
 * URL과 함께 넘어온 데이터들을 리턴한다.
 */
function getUrlValue( key ) {
	var valueObject = {}, hash, value;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
    	hash = hashes[i].split('=');
    	valueObject[hash[0]] = hash[1];
    }
    
    if ( key ) {
    	
    	if ( valueObject[key] ) {
			return valueObject[key];
		}
    	
    	return "";
    }
    
    return valueObject;
}



getUrlValue() 처럼 인자 값을 넘기지 않을 경우 주소에 포함되어 있는 모든 데이터를 Object 형태로 리턴하고


getUrlValue("data1") 처럼 인자 값을 넘길 경우, 해당하는 키의 value만 리턴한다. 없을 경우 "" 을 리턴.



이 댓글을 비밀 댓글로

[Javascript] Iframe document 얻기.

Posted by Find my true self Fimtrus
2014. 8. 13. 15:09 Programming/Web

query에는 css 선택자를 넣어주면된다

ex) getFrameDocuement("#frame1");


function getFrameDocument( query ) {
	var frame = document.querySelector( query );
	if (frame == null)
		return;

	var frameDocument = frame.contentWindow || frame.contentDocument;
	return frameDocument;
}


이 댓글을 비밀 댓글로

[Javascript] 자바스크립트에서 replaceAll 하기.

Posted by Find my true self Fimtrus
2014. 8. 8. 15:26 Programming/Web

자바에서는 친절하게 replaceAll을 제공하지만 


자바스크립트는 제공하지 않는다.


결국 해당 function을 만들어주는 수 밖에 없다..


마찬가지로 웹페이지 로드될 때, 아래코드를 추가시켜주면된다.


String.prototype.replaceAll = function() { 
	var a = arguments, length = a.length;
	
	if ( length == 0 ) {
		return this;
	}
	
	var regExp = new RegExp( a[0], "g");
	
	if ( length == 1 ) {
		
		return this.replace(regExp, "");
	} else {
		return this.replace(regExp, a[1]);
	}
	return this;
}



이 댓글을 비밀 댓글로

[Javacript] Array remove Index 배열 삭제

Posted by Find my true self Fimtrus
2014. 8. 8. 14:28 Programming/Web

자바스크립트의 Array 객체 ( [] 대괄호를 통해 생성 또는 new Array 로 생성하는 경우) 에는 배열 객체를 삭제하거나, 인덱스를 입력받아 삭제하는 function이 없다.


물론 splice나 split 등의 function을 이용하면 되긴 하지만, 


익숙하지 않은 사람들에게는 상당히 귀찮은 작업이다.


그래서 function을 미리 만들어 놓고 사용하는데,


이것도 마찬가지로 웹페이지가 로드될 때 코드를 추가해주면


모든 Array가 아래 function들을 가지게 된다.



Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

Array.prototype.removeIndex = function () {
	var a = arguments, length = a.length;
	this.splice ( a[--length], 1 );
	return this;
}


추가한뒤 array 객체를 보면 remove와 removeIndex가 딱!



이 댓글을 비밀 댓글로