IE_html5 튜토리얼 기술에서 Html5 자리 표시자 속성을 지원하는 플러그인

HTML5는 새로운 입력 유형 유형, 양식 유효성 검사 등과 같은 웹 양식을 많이 향상시켰습니다.

자리 표시자는 HTML5에 추가된 또 다른 새로운 속성입니다. 이 속성이 입력 또는 텍스트 영역에 설정되면 텍스트 상자에 초점이 맞춰지면 값의 내용이 텍스트 상자에 표시됩니다. 프롬프트 텍스트가 사라집니다. 과거에는 JavaScript를 통해서만 이 효과를 얻을 수 있었습니다. Firefox, Google Chrome 등은 이에 대한 지원을 표명했지만 일관성이 없다고 느낀 유일한 것은 IE였습니다!

예:

IE가 자리 표시자를 지원하도록 하는 강력한 속성 플러그인을 소개합니다. 자리 표시자를 지원하지 않는 다른 브라우저와도 호환됩니다. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

$(document).ready(function(){
var doc=document,
inputs=doc.getElementsByTagName('input'),
supportPlaceholder='placeholder'in doc.createElement('input' ),
placeholder=function(input){
var text=input.getAttribute('placeholder'),
defaultValue=input.defaultValue
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text)
{
this.value=''
}
};
input.onblur =function(){
if(input.value====''){
this.value=text
}
}
};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;ivar input=inputs[i],
text=input.getAttribute('placeholder')
if(input.type==='text'&&text){
placeholder(input)
}
}
}
});

코드를 직접 복사하여 참조용으로 js 파일로 저장하세요. 별도의 처리가 필요하지 않습니다.

예: 이렇게 하면 실제로 IE의 입력이 됩니다. 자리 표시자 속성을 표시하지만 페이지에 입력이 하나만 있는 경우 다행스럽게도 입력이 여러 개인 경우 입력이 값을 채우지 않으면 빈 입력이 자동으로 자리 표시자의 값을 채워서 오류가 발생합니다. . input type="text" placeholder="제품 코드 입력" name="goodscode" id="goodscode" value="123" />

해결 방법은 백그라운드에서 스스로 판단하는 것입니다. 아마도 위에서 해결될 수도 있습니다. js 파일을 만들어서 나중에 공부하겠습니다~!