Rumah  >  Artikel  >  hujung hadapan web  >  Atribut pemegang tempat Html5 (serasi IE) kod pelaksanaan_jquery

Atribut pemegang tempat Html5 (serasi IE) kod pelaksanaan_jquery

WBOY
WBOYasal
2016-05-16 16:38:22979semak imbas

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: a06957357265ef4a653cc44a6a0a77e2

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)
   }
  }
 }
 });
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="输入商品名称" />
Penyelesaian adalah dengan membuat pertimbangan anda sendiri di latar belakang Mungkin ia boleh diselesaikan dalam fail js di atas dan kami akan mengkajinya kemudian~!


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn