Atribut pemegang tempat Html5 (serasi IE) kod pelaksanaan

Atribut pemegang tempat Html5 (serasi IE) kod pelaksanaan_jquery

WBOY

Lepaskan： 2016-05-16 16:38:22

asal

984 orang telah melayarinya

HTML5 telah membuat banyak peningkatan pada Borang Web, seperti jenis jenis input baharu, Pengesahan Borang, dsb.

Pemegang tempat ialah satu lagi atribut yang baru ditambahkan pada HTML5 Apabila atribut ini ditetapkan dalam input atau kawasan teks, kandungan nilai akan dipaparkan dalam kotak teks sebagai gesaan teks kelabu Apabila kotak teks mendapat fokus, teks gesaan hilang. Pada masa lalu, kesan ini hanya boleh dicapai dengan menggunakan JavaScript, Google Chrome, dsb. menyatakan sokongan untuknya, tetapi IE adalah satu-satunya yang berasa tidak konsisten!

Contohnya:

Memperkenalkan pemalam atribut berkuasa yang membolehkan IE menyokong pemegang tempat Ia juga serasi dengan penyemak imbas lain yang tidak menyokong pemegang tempat Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Hanya salin kod dan simpan sebagai fail js untuk rujukan Tidak perlu melakukan sebarang pemprosesan, sangat mudah!

cth: Ini menjadikan Input IE memaparkan atribut pemegang tempat, tetapi jika terdapat hanya satu input pada halaman, tidak mengapa Jika terdapat berbilang input, jika input tidak mengisi sebarang nilai, maka inputnya kosong akan Mengisi nilai pemegang tempat secara automatik, menyebabkan ralat Contohnya:

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

Salin selepas log masuk

Penyelesaian adalah dengan membuat pertimbangan anda sendiri di latar belakang Mungkin ia boleh diselesaikan dalam fail js di atas dan kami akan mengkajinya kemudian~!