jQuery_jquery를 기반으로 IE 브라우저 호환 자리 표시자 효과를 얻는 두 가지 방법

자리 표시자는 HTML5의 속성 중 하나입니다. 브라우저에 따라 표시 효과가 약간씩 다릅니다(HTML5를 지원하는 최신 브라우저).

Chrome(v31.0.1650.63 m), Firefox(v21.0) 및 360 Security(v6.3 속도 모드)에서는 입력 필드에 포커스가 잡힌 후 다음과 같이 프롬프트 텍스트가 사라지지 않습니다. 그림(크롬):

초점을 맞추기 전:

집중할 때:

IE11은 뭔가 특별한 일을 해야 합니다:

초점을 맞추기 전:

집중할 때:

즉, 초점이 맞춰지면 텍스트 프롬프트가 사라집니다.

최신이 아닌 브라우저(예: IE6-IE9)는 자리 표시자 속성을 지원하지 않습니다. 이제 jQuery를 사용하여 자리표시자 표시 효과를 얻을 수 있도록 하세요. 즉, Chrome과 같은 것을 얻으려면 입력 상자에 포커스가 있을 때 프롬프트 텍스트가 사라집니다. 그 결과 입력 상자에 초점이 맞춰졌을 때 프롬프트 텍스트가 사라지지 않습니다. 두 번째 방법을 사용할 수 있습니다.

방법 1

효과 미리보기:

http://jsfiddle.net/L57b25yr/embedded/result/

먼저 브라우저가 자리 표시자 속성을 지원하는지 확인하는 것입니다. 그렇지 않은 경우 모든 입력 상자를 탐색하여 자리 표시자 속성의 값을 가져와 프롬프트 메시지로 입력 상자에 채우고 글꼴을 회색으로 설정합니다. .

입력 상자에 초점이 맞춰지고 입력 상자의 텍스트가 설정된 프롬프트 정보와 동일하면 입력 상자가 지워집니다.

입력 상자가 초점을 잃고(흐림) 입력 상자의 텍스트가 비어 있는 경우 획득한 자리 표시자 속성 값을 프롬프트 메시지로 입력 상자에 채우고 글꼴을 회색으로 설정합니다.

입력 상자에 입력이 있는 경우(keydown), 입력 상자의 프롬프트 정보가 포커스 이벤트에 의해 지워졌습니다. 이때 글꼴을 검정색으로 복원하기만 하면 됩니다.

이 방법의 단점은 DOM 로드 시 포커스를 받는 입력 상자에 적합하지 않다는 점입니다. 사용자 입장에서는 페이지 로드 시 포커스를 받는 입력 상자의 프롬프트 텍스트가 도착하지 않았습니다.

HTML:

<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

CSS:

.phcolor{ color:#999;}

JS:

$(function(){  

  //判断浏览器是否支持placeholder属性
  supportPlaceholder='placeholder'in document.createElement('input'),

  placeholder=function(input){

    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;

    if(!defaultValue){

      input.val(text).addClass("phcolor");
    }

    input.focus(function(){

      if(input.val() == text){
  
        $(this).val("");
      }
    });

 
    input.blur(function(){

      if(input.val() == ""){
      
        $(this).val(text).addClass("phcolor");
      }
    });

    //输入的字符不为灰色
    input.keydown(function(){
 
      $(this).removeClass("phcolor");
    });
  };

  //当浏览器不支持placeholder属性时，调用placeholder函数
  if(!supportPlaceholder){

    $('input').each(function(){

      text = $(this).attr("placeholder");

      if($(this).attr("type") == "text"){

        placeholder($(this));
      }
    });
  }

});

테스트 후 IE11 자리표시자의 표시 효과를 얻을 수 있습니다.

방법 2

이 방법의 아이디어는 입력 상자의 배경 이미지로 프롬프트 텍스트가 포함된 그림을 만들고 동시에 초점을 맞추고 배경 이미지를 로드하는 것입니다.

배경 이미지는 다음과 같습니다.

입력 상자가 비어 있지 않으면 배경 이미지를 제거하세요.

입력 상자가 비어 있으면 배경 이미지를 로드합니다.

사용자가 키보드의 키를 누르고 입력 상자가 비어 있지 않으면(입력 문자) 배경 이미지를 제거합니다.

사용자가 키보드의 키를 누르고 입력 상자가 비어 있는 경우(문자 삭제) 배경 이미지를 로드합니다.

이 방법의 단점은 각 입력마다 서로 다른 프롬프트 텍스트로 배경 이미지를 만들고 입력 스타일을 설정해야 한다는 것입니다.

HTML 코드는 변경되지 않습니다.

CSS:

.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS:

$(function(){  

   //判断浏览器是否支持placeholder属性
   supportPlaceholder='placeholder' in document.createElement('input');

   if(!supportPlaceholder){

     //初始状态添加背景图片
     $("#uname").attr("class","phbg");
     //初始状态获得焦点
     $("#uname").focus;

     function destyle(){
     
      if($("#uname").val() != ""){
        
        $("#uname").removeClass("phbg");
      }else{
      
        $("#uname").attr("class","phbg");
       }
     }
     
     //当输入框为空时，添加背景图片；有值时去掉背景图片
     destyle();

     $("#uname").keyup(function(){

      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
      destyle();
     });

     $("#uname").keydown(function(){
     
      //keydown事件可以在按键按下的第一时间去掉背景图片
      $("#uname").removeClass("phbg");
     });
   }
});

이 방법은 종료됩니다.

이 방법은 IETester의 IE8에서 효과를 표시합니다.

집중할 때:

초점을 잃었을 때:

입력 시:

더 좋은 방법이 있으시면 자유롭게 토론해 주세요.