placeholder란?
사용자가 값을 입력하기 전에 입력값에 도움을 줄 수 있는
짧은 힌트를 입력 상자에 표시해주는 것 입니다.
사용자가 값을 입력하면 문자는 사라지게 됩니다.
ID :
그런데 스마트 디자인에서는 입력 상자가 변수({$변수})로 되어 있는 경우가 있습니다.
이 경우 스크립트로 placeholder를 넣어주어 사용이 가능하게 하는 방법에 대해 알아보겠습니다.
1. 스마트디자인 편집창을 열어주세요.
/layout/basic/js/basic.js 파일에 아래 코드를 넣고 저장해주세요.
$(document).ready(function(){
//placeholder
$(".ePlaceholder input, .ePlaceholder textarea").each(function(i){
var placeholderName = $(this).parents().attr('title'); //title에 입력된 문구를 placeholder로 넣어줍니다.
$(this).attr("placeholder", placeholderName);
});
/* placeholder ie8, ie9 */ //placeholder는 IE8,9에서 지원하지 않아 아래 코드가 필요합니다.
$.fn.extend({
placeholder : function() {
//IE 8 버전에는 hasPlaceholderSupport() 값이 false를 리턴
if (hasPlaceholderSupport() === true) {
return this;
}
//hasPlaceholderSupport() 값이 false 일 경우 아래 코드를 실행
return this.each(function(){
var findThis = $(this);
var sPlaceholder = findThis.attr('placeholder');
if ( ! sPlaceholder) {
return;
}
findThis.wrap('<label class="ePlaceholder" />');
var sDisplayPlaceHolder = $(this).val() ? ' style="display:none;"' : '';
findThis.before('<span' + sDisplayPlaceHolder + '>' + sPlaceholder + '</span>');
this.onpropertychange = function(e){
e = event || e;
if (e.propertyName == 'value') {
$(this).trigger('focusout');
}
};
//공통 class
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf("msie") != -1) {
$(".ePlaceholder").css({"position":"relative"});
$(".ePlaceholder span").css({"position":"absolute", "padding":"0 4px", "color":"#878787"});
$(".ePlaceholder label").css({"padding":"0"});
}
});
}
});
$(':input[placeholder]').placeholder(); //placeholder() 함수를 호출
//클릭하면 placeholder 숨김
$('body').delegate('.ePlaceholder span', 'click', function(){
$(this).hide();
});
//input창 포커스 인 일때 placeholder 숨김
$('body').delegate('.ePlaceholder :input', 'focusin', function(){
$(this).prev('span').hide();
});
//input창 포커스 아웃 일때 value 가 true 이면 숨김, false 이면 보여짐
$('body').delegate('.ePlaceholder :input', 'focusout', function(){
if (this.value) {
$(this).prev('span').hide();
} else {
$(this).prev('span').show();
}
});
//input에 placeholder가 지원이 되면 true를 안되면 false를 리턴값으로 던져줌
function hasPlaceholderSupport() {
if ('placeholder' in document.createElement('input')) {
return true;
} else {
return false;
}
}
});
2. 폼 요소에 placeholder 문구 넣기
사용하고자 하는 곳에 <span class="ePlaceholder" title="힌트문구">{$변수}</span> 이와 같이 감싸줍니다.
예)로그인(login.html)
<label class="id ePlaceholder" title="아이디">{$form.member_id}</label> <!-- {$form.member_id} 아이디 입력 변수 -->
<label class="password ePlaceholder" title="비밀번호">{$form.member_passwd}</label> <!-- {$form.member_passwd} 비밀번호 입력 변수 -->
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
로그인 입력 상자에 placeholder가 적용된 것을 확인할 수 있습니다.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
※ 다양한 입력 상자에 적용하기
사용하고자 하는 곳에 위에서 작업했던 방식과 동일하게 태그를 넣어줍니다.
예)주문서작성(orderform.html)
<span class="ePlaceholder" title="배송메세지를 입력해주세요. 예)경비실에 맡겨주세요.">{$form.omessage}</span>
<!-- {$form.omessage} 배송메세지 입력 변수 -->
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
배송메세지 입력 상자에 placeholder가 적용된 것을 확인할 수 있습니다.
