고객들을 위한 입력 힌트(Placeholder)를 사용하려면 어떻게 해야 하나요? – 카페24 Help Center

쇼핑몰 고객들의 편의를 돕는 입력 힌트 (Placeholder) 사용 방법을 알려드릴게요.

자세히 알아보기

입력 힌트(Placeholder)란?

사용자가 값을 입력하기 전에 입력값에 도움을 줄 수 있는 짧은 힌트를 입력 상자에 표시해주는 것이에요.
사용자가 값을 입력하면 문자는 사라지게 돼요.

사용 방법은?

input 또는 textarea 태그에 placeholder 속성을 넣어주면 된답니다.
<input type="text" placeholder="문구 입력">
<textarea rows="4" cols="50" placeholder="문구 입력"></textarea>

스마트디자인에서 사용 방법은?

스마트디자인에서는 입력 상자가 변수({$변수})로 되어 있는 경우가 있는데요.
이 경우 스크립트로 placeholder를 넣어주어 사용이 가능하게 하는 방법에 대해 알아볼게요.

스마트디자인 편집창 열기
▼ 아래와 같이 /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;
}
}
});

폼 요소에 placeholder 문구 넣기
▼ 아래와 사용하고자 하는 곳에 <span class="ePlaceholder" title="힌트문구">{$변수}</span> 와 같이 감싸주세요. (파란색 소스를 추가해 주세요.)

예)로그인(login.html)
<label class="id ePlaceholder" title="아이디">{$form.member_id}</label> 
<label class="password ePlaceholder" title="비밀번호">{$form.member_passwd}</label>

플러스팁 : 다양한 입력 상자에 적용하기

▼ 아래와 사용하고자 하는 곳에 사용하고자 하는 곳에 위에서 작업했던 방식과 동일하게 태그를 넣어주세요.(파란색 소스를 추가해 주세요.)

예)주문서작성(orderform.html)

<span class="ePlaceholder" title="배송메세지를 입력해주세요. 예)경비실에 맡겨주세요.">{$form.omessage}</span>