js는 지원되지 않는 browsers_javascript 기술에 적응하기 위해 html5 자리 표시자를 모방합니다.

HTML5는 기본적으로 자리 표시자를 지원합니다. 이를 지원하지 않는 브라우저의 경우(즉) js 시뮬레이션을 사용할 수 있습니다.
js 코드

코드 복사 코드는 다음과 같습니다.

( function(){
//자리 표시자 지원 여부 확인
function isPlaceholer(){
var input = document.createElement('input');
입력에서 "자리 표시자"를 반환합니다.
}
//지원되지 않는 코드
if(!isPlaceholer()){
//클래스 만들기
function Placeholder(obj){
this.input = obj; >this .label = document.createElement('label');
this.label.innerHTML = obj.getAttribute('placeholder')
this.label.style.cssText = 'position:absolute; 들여쓰기: 4px;색상:#999999; 글꼴 크기:12px;';
if(obj.value != ''){
this.label.style.display = 'none';
this.init();
}
Placeholder.prototype = {
//위치 가져오기
getxy: function(obj){
var left, top; if(document .documentElement.getBoundingClientRect){
var html = document.documentElement,
body = document.body,
pos = obj.getBoundingClientRect(),
st = html.scrollTop || .scrollTop,
sl = html.scrollLeft || body.scrollLeft,
ct = html.clientTop || body.clientTop,
cl = html.clientLeft || pos.left sl - cl;
top = pos.top st - ct;
else{
while(obj){
left = obj.offsetLeft; obj.offsetTop ;
obj = obj.offsetParent;
}
}
return{
왼쪽: 왼쪽,
위쪽
}
},
// 너비와 높이 가져오기
getwh : function(obj){
return {
w : obj.offsetWidth,
h : obj.offsetHeight
}
},
//너비 및 높이 값 메서드 추가
setStyles: function(obj,styles){
for(var p in styles){
obj.style[p] = styles[p] 'px';
}
},
init : function(){
var label = this.label,
input = this.input,
xy = this.getxy(input),
wh = this .getwh(입력);
this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left , 'top': xy.top});
document.body.appendChild(label);
label.onclick = function(){
this.style.display = "none"; input.focus() ;
}
input.onfocus = function(){
label.style.display = "none"
};
if( this.value == ""){
label.style.display = "차단";
}
}
}
}
var inpColl = document.getElementsByTagName(' input'),
textColl = document.getElementsByTagName('textarea');
//HTML 컬렉션이 배열로 변환됩니다
function toArray(coll){
for(var i = 0, a = [ ], len = coll.length; i a[i] = coll[i];
return a;
var inpArr = toArray(inpColl),
textArr = toArray(textColl),
placeholderArr = inpArr.concat(textArr)
for (var i = 0; i if (placeholderArr[i].getAttribute('placeholder')){
new Placeholder(placeholderArr[i])
}
}
}
}) ()



html 코드
:




코드 복사

코드는 다음과 같습니다. 다음:

< ;br>

css 코드

:




코드 복사

코드는 다음과 같습니다.
div,input,textarea{ 여백:0 ; 패딩:0;}

div{width:400px; margin:100px auto 0;} input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border :1px #666666 solid; background-color:#fff; padding-left:2px;} textarea{ height:60px; 크기 조정: 없음;}