Atribut pemegang tempat Html5 (serasi IE) kod pelaksanaan_jquery

WBOY
Lepaskan: 2016-05-16 16:38:22
asal
976 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~!


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan