Two methods to achieve IE browser compatible placeholder effect based on jQuery_jquery

Placeholder is one of the attributes of HTML5d5fd7aea971a85678ba271703566ebfd. It will have slightly different display effects in different browsers (modern browsers that support HTML5):

In Chrome (v31.0.1650.63 m), Firefox (v21.0), and 360 Security (v6.3 speed mode), after the input field gains focus, the prompt text does not disappear, as shown in the figure (Chrome):

Before getting focus:

When focused:

IE11 has to do something special:

Before getting focus:

When focused:

That is to say, the text prompt will disappear when it gets focus.

Non-modern browsers (such as IE6-IE9) do not support the placeholder attribute. Now use jQuery to enable these non-modern browsers to also achieve the placeholder display effect. The first method achieves the effect of IE11, that is, the prompt text will disappear when the input box gets focus; if you want to get something like Chrome The effect is that the prompt text does not disappear when the input box gains focus. You can use the second method.

Method 1

Effect preview:

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

The idea is to first determine whether the browser supports the placeholder attribute. If not, traverse all input boxes, obtain the value of the placeholder attribute and fill it into the input box as a prompt message, and set the font to gray.

When the input box gets focus and the text in the input box is equal to the set prompt information, the input box is cleared;

When the input box loses focus (blur) and the text in the input box is empty, fill the obtained value of the placeholder attribute into the input box as a prompt message, and set the font to gray;

When there is input in the input box (keydown), the prompt information in the input box has been cleared by the focus event. At this time, you only need to restore the font to black.

The disadvantage of this method is that it is not suitable for the input box that gets the focus when the DOM is loaded, because from the user's perspective, the prompt text of the input box that gets the focus when the page is loaded is not visible. Arrived.

HTML:

81e829c1c5c807e9eeaa9f1cbed12546

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));
      }
    });
  }

});

After testing, it can achieve the display effect of IE11 placeholder.

Method 2

The idea of ​​this method is to make a picture containing prompt text as the background image of the input box, and initially gain focus and load the background image at the same time;

The background image is as follows:

When the input box is not empty, remove the background image;

When the input box is empty, load the background image;

When the user presses a key on the keyboard and the input box is not empty (input characters), remove the background image;

When the user presses a key on the keyboard and the input box is empty (delete characters), load the background image.

The disadvantage of this method is that you need to create a background image for each input with different prompt text, and set the input style.

HTML code remains unchanged.

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");
     });
   }
});

This method ends.

This method displays the effect under IE8 of IETester:

When focused:

When focus is lost:

When input:

If anyone has a better method, please feel free to discuss it.