Dua kaedah untuk mencapai kesan ruang letak serasi pelayar IE berdasarkan jQuery_jquery

Pemegang tempat ialah salah satu atribut HTML5 Ia akan mempunyai kesan paparan yang sedikit berbeza dalam penyemak imbas yang berbeza (penyemak imbas moden yang menyokong HTML5):

Dalam Chrome (v31.0.1650.63 m), Firefox (v21.0) dan 360 Security (mod kelajuan v6.3), selepas medan input mendapat fokus, teks gesaan tidak hilang, seperti yang ditunjukkan dalam angka (Chrome):

Sebelum mendapat fokus:

Apabila fokus:

IE11 perlu melakukan sesuatu yang istimewa:

Sebelum mendapat fokus:

Apabila fokus:

Maksudnya, gesaan teks akan hilang apabila ia mendapat fokus.

Pelayar bukan moden (seperti IE6-IE9) tidak menyokong atribut pemegang tempat. Sekarang gunakan jQuery untuk membolehkan penyemak imbas bukan moden ini turut mencapai kesan paparan pemegang tempat Kaedah pertama mencapai kesan IE11, iaitu, teks gesaan akan hilang apabila kotak input mendapat tumpuan jika anda ingin mendapatkan sesuatu seperti Chrome Kesannya ialah teks gesaan tidak hilang apabila kotak input mendapat fokus Anda boleh menggunakan kaedah kedua.

Kaedah 1

Pratonton kesan:

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

Ideanya adalah untuk menentukan terlebih dahulu sama ada penyemak imbas menyokong atribut pemegang tempat Jika tidak, lintasi semua kotak input, dapatkan nilai atribut pemegang tempat dan isikannya ke dalam kotak input sebagai mesej segera dan tetapkan fon kepada kelabu. .

Apabila kotak input mendapat fokus dan teks dalam kotak input adalah sama dengan maklumat gesaan yang ditetapkan, kotak input dikosongkan

Apabila kotak input kehilangan fokus (kabur) dan teks dalam kotak input kosong, isikan nilai atribut pemegang tempat yang diperoleh ke dalam kotak input sebagai mesej gesaan dan tetapkan fon kepada kelabu;

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

.phcolor{ color:#999;}

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

});

Kaedah 2

Imej latar belakang adalah seperti berikut:

Apabila kotak input tidak kosong, alih keluar imej latar belakang;

Apabila pengguna menekan kekunci pada papan kekunci dan kotak input tidak kosong (aksara input), keluarkan imej latar belakang

Apabila pengguna menekan kekunci pada papan kekunci dan kotak input kosong (padam aksara), muatkan imej latar belakang.

Kelemahan kaedah ini ialah anda perlu mencipta imej latar belakang untuk setiap input dengan teks gesaan yang berbeza, dan tetapkan gaya input.

Kod HTML kekal tidak berubah.

CSS:

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

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

Apabila fokus: