placehoder_effect 속성

이 화면은 placehoder_effect 샘플 화면이다.

placehoder_effect는 컴포넌트의 hinttext_effect_func 속성 혹은 setplaceholdereffect API를 사용하여 설정한다.

text를 설정하지 않았거나 공백문자열( ' ' )로 설정시, 컴포넌트의 hint_text값이 설정되어 있다면 hint_text값을 text값으로 사용한다.

vert_align_focusin값이 1일 경우 수평방향에 관계없이 컴포넌트의 우측중앙에 표시된다.

컴포넌트에 값이 입력되어 있다면 플레이스홀더의 위치가 focus-out 상태로 유지된다.

관련 속성으로 hinttext_effect_func, hint_text가 있다.

관련 API로 getplaceholdereffect, setplaceholdereffect, sethinttext가 있다.

템플릿 위치: /HTML5/COMPONENT/FIELD/field_placeholdereffect

템플릿 파일

• field_placeholdereffect.xml
• field_placeholdereffect.js
• 새창으로 실행

function screen_on_load()
{
	var prop_obj = {
		// 표시할 텍스트(기본값: '')
		text: "한글123abc",
		// 애니메이션 효과가 동작할 시간(단위: ms)(기본값: 300)
		effect_duration: 300,
		// focusout시 폰트(기본값: ['굴림체',9,0,0,0,0])
		focusout_font: ["맑은고딕",10,0,0,0,0],
		// focusout시에 비해 focus-in시, 줄어들 폰트사이즈 차이(기본값: 2)
		fontsize_gap: 2,
		// focusin시, 글자 색상(기본값: [51,153,255])
		focusin_fore_color: [51,153,255],
		// focusout시, 글자 색상(기본값: [170,170,170])
		focusout_fore_color: [170,170,170],
		// focusin시, 텍스트 좌측 Gap(기본값: 0)
		// 양수값은 텍스트 우측 이동, 음수값은 텍스트 좌측 이동
		focusin_horz_gap: 0,
		// focusin시, 텍스트와 컴포넌트와의 Gap(기본값: 0)
		// focusin_vert_align 값이 0인 경우,
		// 양수값은 텍스트 상단 이동, 음수값은 텍스트 하단 이동
		// focusin_vert_align 값이 1/2인 경우,
		// 양수값은 텍스트 하단 이동, 음수값은 텍스트 상단 이동
        focusin_vert_gap: 0,
		// focusout시, 텍스트 좌측 Gap(기본값: 0)
		// 양수값은 텍스트가 우측으로 이동하고, 음수값은 텍스트 좌측 이동
        focusout_horz_gap: 2,
		// focusout시 텍스트 상단 Gap(기본값: 0)
		// 양수값은 텍스트 하단 이동, 음수값은 텍스트 상단 이동
        focusout_vert_gap: 0,
		// focusout시, 표시될 플레이스홀더 위치("left"(기본값)/"center"/"right")
		focusout_horz_align: "left",
		// 수평방향 위치(0: 좌(기본값), 1: 중, 2: 우)
		focusin_horz_align: 0,
		// 수직방향 위치(0: 상(기본값), 1: 중, 2: 하)
		focusin_vert_align: 0
	};

	// 좌측위
	this.fld1.setplaceholdereffect(prop_obj);

	// 우측위
	prop_obj.focusin_horz_align = 1;
	prop_obj.focusin_vert_align = 0;
	this.fld2.setplaceholdereffect(prop_obj);

	// 우측중앙
	prop_obj.focusin_horz_align = 0;
	prop_obj.focusin_vert_align = 1;
	this.fld3.setplaceholdereffect(prop_obj);

	// 좌측아래
	prop_obj.focusin_horz_align = 0;
	prop_obj.focusin_vert_align = 2;
	this.fld4.setplaceholdereffect(prop_obj);

	// 우측아래
	prop_obj.focusin_horz_align = 1;
	prop_obj.focusin_vert_align = 2;
	this.fld5.setplaceholdereffect(prop_obj);

	prop_obj.focusin_horz_align = 0;
	prop_obj.focusin_vert_align = 0;
	this.fld6.setplaceholdereffect(prop_obj);
}

function btn_sethinttext_on_mouseup(objInst)
{
	this.fld6.sethinttext("가나다456def");
}

function btn_change1_on_mouseup(objInst)
{
	var prop_obj = {
		effect_duration: 200,
		focusout_font: ["맑은고딕",14,0,0,0,0],
		text: "design1",
		focusout_fore_color: [255,0,0],
		focusin_fore_color: [0,175,16],
		focusout_horz_margin: 5
	};

	prop_obj.focusin_horz_align = 1;
	prop_obj.focusin_vert_align = 2;
	this.fld7.setplaceholdereffect(prop_obj);
}

function btn_change2_on_mouseup(objInst)
{
	var prop_obj;

	prop_obj = this.fld7.getplaceholdereffect();

	// 생성되어 있지 않을때 getplaceholdereffect API를 호출한 것이면 리턴
	if (prop_obj === null){ return; }

	prop_obj.focusin_fore_color = [0,36,255];
	prop_obj.focusout_fore_color = [208,210,0];

	this.fld7.setplaceholdereffect(prop_obj);
}

function btn_delete_on_mouseup(objInst)
{
	// 파라미터로 null을 설정시 삭제
	this.fld7.setplaceholdereffect(null);
}

/**
 * HintText 효과 처리 사용자 정의 함수
 * @param objScreen 화면 인스턴스
 * @param objComponent 컴포넌트 인스턴스
 * @returns setplaceholdereffect 함수에 사용되는 속성 오브젝트 또는 null
 */
function HintTextEffectFunc(objScreen, objComponent) {
	// prop_obj 구조는 setplaceholdereffect API 도움말 참조
	var prop_obj = {
		text: "속성으로 설정", // 표시할 텍스트
		focusout_horz_gap: 2 // focus-out일때 텍스트 좌측 gap값
	};

	// Case 1. setplaceholdereffect 함수에 사용될 속성 오브젝트 리턴
	return prop_obj;

	// Case 2. setplaceholdereffect 함수를 직접 호출하고 null 리턴
	// objComponent.setplaceholdereffect(prop_obj);
	// return null;
}