홍이의 개발 노트

jQuery placeholder 플러그인 본문

개발이야기/자바스크립트(javascript)

jQuery placeholder 플러그인

코바 2012. 9. 5. 16:53

html5에 placeholder 자체 기능이 있지만 문제가 많다.

예를 들면 safari에서 정렬이 안먹힌다던가 

익스플로러6,7에서 안먹히는 문제도 있다. 

보통 내용 부분을 포커스에 맞쳐 없애던가 blur 이벤트에 다시 생긴다던가

하는 작업을 해줘야 하는데 각각 프로그래밍을 해줘야 되는 문제가 생긴다

조회 부분에서 placeholder 부분을 가져가거나 하는일이 생기는데 

생각해보니 차라리 div하나를 생성 시켜 텍스트 input 박스 위에 올려 놓는 방법은 어떨까 라고 생각 되어

한번 jquery로 만들어 보았다.


※ textPlaceholder jquery plugin

(function($){

$.fn.textPlaceholder = function () {

return this.each(function(){

var that = this;

var placeholder = that.getAttribute('placeholder');

if (!placeholder) return;

var $input = $(that);

$input.attr('placeholder', '');

var $placeholderDiv = $('<div/>')

.text(placeholder)

.addClass('text-placeholder')

.css({'position' : 'absolute',

  'top':$input.position().top,

  'left':$input.position().left})

.height($input.height())

.width($input.width())

.appendTo($input.parent());


$placeholderDiv.click(function() {

$input.focus();

});

$input.focus(function(){

$placeholderDiv.hide();

});


$input.blur(function(){

if ($(this).val()==''){

$placeholderDiv.show();

}

});

});

}

})(jQuery);


※ 사용방법

<body>

...

<input  ... placeholder="입력하세요" ... />

...

</body>

------------------------------------------------------------

<script>

...

$('[placeholder]').textPlaceholder();

...

</script>

------------------------------------------------------------

<style>

.text-placeholder {

... 필요한 css ...

}

</style>


컨셉은 https://github.com/NV/placeholder.js 를 참고 했습니다.

링크에 있는 placeholder는 input 내용을 변경하는 것이라 submit은 placeholder값을 안가지고 가도록 체크해주지만 

직접 input 값을 참조하여 가져 갈 경우에는 직접 프로그래밍을 해줘서 placeholder값을 안가지고

가도록 해야되기 때문에 완전히 새로 만들었습니다.

인터페이스는 동일하게 만들었지만 말이죠 ^^;;;

'개발이야기/자바스크립트(javascript)' Related Articles more