Html5 자리 표시자 속성(IE 호환) 구현 code_jquery

HTML5에서는 새로운 입력 유형 유형, 양식 유효성 검사 등 웹 양식이 많이 향상되었습니다.

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

예: 6bbf1737f509604f192de1766de55578

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;i<len;i++){
   var input=inputs[i],
   text=input.getAttribute('placeholder');
   if(input.type==='text'&&text){
    placeholder(input)
   }
  }
 }
 });

코드를 복사해서 js 파일로 저장하면 별도의 처리가 필요 없어 매우 편리합니다!

예: 이렇게 하면 IE의 입력이 자리 표시자 속성을 표시할 수 있지만 페이지에 입력이 하나만 있는 경우 입력이 여러 개 있고 입력이 값을 채우지 않으면 비어 있는 것입니다. 입력은 자동으로 자리 표시자 값을 value로 채워서 오류를 발생시킵니다.

<input type="text" placeholder="输入商品编码" name="goodscode" id="goodscode" value="123" />
<input type="text" placeholder="输入商品名称" name="goodsname" id="goodsname" value="输入商品名称" />

해결 방법은 백그라운드에서 스스로 판단하는 것입니다. 아마도 위의 js 파일에서 해결될 수 있으며 나중에 연구하겠습니다~!