Placeholder di IE9


140

Tampaknya ini adalah masalah yang sangat terkenal tetapi semua solusi yang saya temukan di Google tidak berfungsi pada IE9 yang baru saya unduh.

Mana cara favorit Anda untuk mengaktifkan Placeholderproperti di tag inputdan textarea?

Opsional: Saya kehilangan banyak waktu untuk itu dan belum mencari requiredproperti. Apakah Anda juga punya saran untuk ini? Jelas saya dapat memeriksa nilai dalam PHP, tetapi untuk membantu pengguna properti ini sangat nyaman.


Saya kembali ke HTML setelah 4 tahun. Artinya saya terbuka untuk saran untuk mengganti alat saya yang sudah ketinggalan zaman. Saya memulai ulang hampir dari nol. Saya sudah mencoba terutama dengan JQuery dan banyak copy / past dari hasil google, percobaan terakhir
chriscatfr

Jawaban:


185

Plugin HTML5 Placeholder jQuery
- oleh Mathias Bynens (kolaborator di HTML5 Boilerplate dan jsPerf )

https://github.com/mathiasbynens/jquery-placeholder

Demo & Contoh

http://mathiasbynens.be/demo/placeholder

ps
Saya telah menggunakan plugin ini berkali-kali dan itu berfungsi memperlakukan. Juga tidak mengirimkan teks placeholder sebagai nilai ketika Anda mengirimkan formulir Anda (... rasa sakit yang sebenarnya saya temukan dengan plugin lain).


Kami bekerja dengan CRM khusus. Saya menambahkan kode ini dan karya-karya seperti yang diharapkan, tetapi mereka mengirimkan formulir mereka melalui javascript. Tombol kirim telah onclick="_IW.FormsRuntime.submit(this.form);". Adakah saya bisa mengubah acara onclick ini untuk pertama-tama menghapus placeholder, dan kemudian menjalankan kode CRM ini yang ada di onclick?
Leeish

1
saya menyalin file js github ke dalam kode src saya. Masih tidak cocok dengan placeholder.
Philo

2
Ini memang manjur, namun sulit digunakan pada aplikasi satu halaman. Anda perlu memicunya secara manual untuk bidang yang ditambahkan secara dinamis. Selain itu, bekerja dengan sangat baik!
smets.kevin

1
Terima kasih, plugin yang rapi, namun satu masalah yang saya miliki adalah dengan ie9 placeholder menghilang ketika input teks fokus. Ini berbeda dari perilaku HTML5
gerrytan

1
Ini berfungsi baik dengan satu besar 'tetapi', $ ('input'). Val () mengembalikan nilai placeholder ketika input kosong. Karena saya bekerja dengan kerangka kerja AJAX, placeholder itu dikirim ke server ...
Danubian Sailor

21

Saya pikir ini adalah apa yang Anda cari: jquery-html5-placeholder-fix

Solusi ini menggunakan deteksi fitur (melalui modernizr ) untuk menentukan apakah placeholder didukung. Jika tidak, tambahkan dukungan (via jQuery).


2
Ini bekerja, tapi itu bukan kode terhebat. Di bagian atas $(this)harus ditugaskan ke variabel yang dapat digunakan di seluruh kode. Memanggil $untuk setiap ekspresi yang digunakan $(this)adalah cara langsung untuk "Don't Write jQuery Like This 101".
Sami Samhuri

20
Anda harus berhati-hati dengan kode ini karena jika Anda mengirimkan formulir, nilai placeholder akan dikirimkan sebagai nilai formulir. Harus menghapusnya sebelum dikirimkan.
ericbae

2
@chriscatfr Harap pertimbangkan menerima jawaban saya ( stackoverflow.com/a/13281620/114140 ) karena saya merasa itu akan mengarahkan pengguna SO ke solusi yang jauh lebih baik.
Chris Jacob

Penasaran karena saya baru mengenal fitur pertarungan HTML 5: Apakah modernisasi yang menyebabkan ini menjadi solusi yang buruk atau memperbaiki jquery-html5-placeholder sendiri (atau keduanya)?
Snekse

Ini sederhana dan elegan dan melakukan pekerjaan untuk saya.
graumanoz

17

Jika Anda ingin melakukannya tanpa menggunakan jquery atau modenizer Anda dapat menggunakan kode di bawah ini:

(function(){

     "use strict";

     //shim for String's trim function..
     function trim(string){
         return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
     }

     //returns whether the given element has the given class name..
     function hasClassName(element, className){ 
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return false;
         var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
         return regex.test(element.className);
     }

     function removeClassName(element, className){
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return;
         element.className = elClassName.replace(
             new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
     }

     function addClassName(element, className){
         var elClassName = element.className;
         if(elClassName)
             element.className += " " + className;
         else
             element.className = className;
     }

     //strings to make event attachment x-browser.. 
     var addEvent = document.addEventListener ?
            'addEventListener' : 'attachEvent';
     var eventPrefix = document.addEventListener ? '' : 'on';

     //the class which is added when the placeholder is being used..
     var placeHolderClassName = 'usingPlaceHolder';

     //allows the given textField to use it's placeholder attribute
     //as if it's functionality is supported natively..
     window.placeHolder = function(textField){

         //don't do anything if you get it for free..
         if('placeholder' in document.createElement('input'))
             return;

         //don't do anything if the place holder attribute is not
         //defined or is blank..
         var placeHolder = textField.getAttribute('placeholder');        
         if(!placeHolder)
             return;

         //if it's just the empty string do nothing..
         placeHolder = trim(placeHolder);
         if(placeHolder === '')
             return;

         //called on blur - sets the value to the place holder if it's empty..
         var onBlur = function(){
             if(textField.value !== '') //a space is a valid input..
                 return;
             textField.value = placeHolder;
             addClassName(textField, placeHolderClassName);
         };

         //the blur event..
         textField[addEvent](eventPrefix + 'blur', onBlur, false);

         //the focus event - removes the place holder if required..
         textField[addEvent](eventPrefix + 'focus', function(){
             if(hasClassName(textField, placeHolderClassName)){
                removeClassName(textField, placeHolderClassName);
                textField.value = "";
             }
         }, false);

         //the submit event on the form to which it's associated - if the
         //placeholder is attached set the value to be empty..
         var form = textField.form;
         if(form){
             form[addEvent](eventPrefix + 'submit', function(){
                 if(hasClassName(textField, placeHolderClassName))
                     textField.value = '';
            }, false);
         }

         onBlur(); //call the onBlur to set it initially..
    };

}());

Untuk setiap bidang teks yang ingin Anda gunakan untuk Anda perlu menjalankan placeHolder(HTMLInputElement), tapi saya kira Anda bisa mengubahnya sesuai! Selain itu, melakukannya dengan cara ini, bukan hanya saat memuat berarti Anda dapat membuatnya berfungsi untuk input yang tidak ada di DOM saat laman dimuat.

Perhatikan, bahwa ini berfungsi dengan menerapkan class: usingPlaceHolderke elemen input, sehingga Anda dapat menggunakan ini untuk gaya itu (misalnya menambahkan aturan .usingPlaceHolder { color: #999; font-style: italic; }untuk membuatnya terlihat lebih baik).


1
Maaf - Saya benar-benar tidak tahu apakah itu mudah dilakukan - saya kira Anda ingin menampilkan nilai teks yang sebenarnya, daripada "simbol". Satu-satunya peretasan yang dapat saya pikirkan untuk melakukan ini adalah dengan mengubahnya untuk input teks kecuali jika memiliki fokus atau nilai, jika tidak menampilkannya sebagai bidang kata sandi.
Mark Rhodes

@StephenPatten Lihat perbaikan saya untuk placeholder dengan bidang kata sandi. Saya melakukan persis apa yang disarankan Mark :)
Chev

8

Inilah solusi yang jauh lebih baik. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Saya sudah mengadopsi sedikit untuk bekerja hanya dengan browser di bawah IE10

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

    <script>
    // Placeholder fix for IE
      $('.lt-ie10 [placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
          i.val('').removeClass('placeholder');
          if(i.hasClass('password')) {
            i.removeClass('password');
            this.type='password';
          }     
        }
      }).blur(function() {
        var i = $(this);  
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
          if(this.type=='password') {
            i.addClass('password');
            this.type='text';
          }
          i.addClass('placeholder').val(i.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        //if($(this).validationEngine('validate')) { // If using validationEngine
          $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
              i.val('');
              i.removeClass('placeholder');

          })
        //}
      });
    </script>
    ...
    </html>

tidak berfungsi pada IE8 karena IE tidak mengizinkan jQuery memanipulasi tipe input (lihat komentar dari Bill pada 20 Desember 2011 pukul 1:48 siang di bavotasan.com/2011/html5-placeholder-jquery-fix )
forste

juga mengasumsikan Anda mengirimkan formulir. Sebagian besar aplikasi halaman tunggal yang saya lihat tidak menggunakan formulir. cukup klik penangan.
chovy

5

Jika Anda ingin memasukkan deskripsi, Anda dapat menggunakan ini. Ini berfungsi pada IE 9 dan semua browser lainnya.

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>

1
Tidak mengujinya sendiri, tetapi menebak ini tidak berfungsi dengan baik jika Anda tab ke bidang, bukan mengkliknya. Saya melihat bug ini di banyak situs web, atau yang seperti itu.
eselk

Dengan solusi ini, Anda juga perlu memeriksa nilai ini pada formulir kirim.
Igor Jerosimić

Saya terkejut ini mendapat suara apa pun, ini tidak boleh digunakan bahkan ketika diposting di 2012/2013
LocalPCGuy

Jika Anda menulis ke input apa yang seharusnya menjadi placeholder ('CV2:') apa yang Anda ketikkan akan dihapus.
Daniel

2

Menggunakan mordernizr untuk mendeteksi browser yang tidak mendukung Placeholder, saya membuat kode pendek ini untuk memperbaikinya.

//If placeholder is not supported
if (!Modernizr.input.placeholder){ 

    //Loops on inputs and place the placeholder attribute
    //in the textbox.
    $("input[type=text]").each( function() { 
       $(this).val($(this).attr('placeholder')); 
    })
}

2
Anda harus berhati-hati dengan kode ini karena jika Anda mengirimkan formulir, nilai placeholder akan dikirimkan sebagai nilai formulir. Anda harus menghapusnya sebelum dikirimkan.
chriscatfr

3
@chriscatfr: Bagaimana cara melakukannya dengan benar dalam contoh ini? Jika placeholder saya adalah 'Kata Sandi' dan kata sandi saya sebenarnya adalah 'Kata Sandi'?
Lain

Anda bisa menggunakan konsep "kotor" untuk bidang seperti ini. Tandai bidang sebagai bersih saat entri (mungkin menggunakan data-dirty = "false"). Jika mereka mengirim formulir tanpa mengubah teks tempat penampung, Anda akan melihat bahwa bidang itu bersih, jadi jelas itu. Jika mereka mengubahnya, bahkan dengan nilai yang sama dengan placeholder, maka itu kotor dan Anda mengirimkan nilai itu.
oooyaya

untuk kata sandi dan solusi lainnya silakan lihat di jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel

placeholderproperti distandarisasi sebagai string => tidak perlu untuk Modernizr sebenarnya :::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }adalah tes enaugh untuk tidak mendukung, diuji dalam emulasi mode IE9 - berfungsi.
jave.web

2

Saya tahu saya terlambat tetapi saya menemukan solusi memasukkan di kepala tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->


Apakah Anda menguji ini di IE9? Karena kalau tidak, IE10 + mendukung placeholder ...
jave.web

Tentu saja, ini hanya aneh, bahwa IE9 tidak mendukungnya sendiri bahwa tag akan menyalakannya - apakah itu fitur eksperimental di belakang itu? Apakah ini direferensikan di suatu tempat? :)
jave.web

1

untuk membuatnya berfungsi di IE-9 gunakan di bawah ini. Itu bekerja untuk saya

JQuery perlu menyertakan:

jQuery(function() {
   jQuery.support.placeholder = false;
   webkit_type = document.createElement('input');
   if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
   $(function() {

     if(!$.support.placeholder) {

       var active = document.activeElement;

       $(':text, textarea, :password').focus(function () {

       if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
          $(this).val('').removeClass('hasPlaceholder');
        }
      }).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});

$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

Gaya CSS harus termasuk:

.hasPlaceholder {color: #aaa;}

1
Anda harus memperbaiki pemformatan Anda di sini, seperti menambahkan lekukan dan pisahkan jawaban Anda dari kode Anda
a darren

1

Agak terlambat ke pesta, tetapi saya menggunakan JS saya yang sudah dicoba dan tepercaya yang memanfaatkannya Modernizr . Dapat disalin / ditempelkan dan diterapkan ke proyek apa pun. Bekerja setiap saat:

// Placeholder fallback
if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

Semua solusi ini menggunakan jQuery .. apakah tidak ada solusi tanpa jQuery yang membengkak?
Spock

0

Saya biasanya berpikir sangat tinggi dari http://cdnjs.com/ dan mereka mendaftar:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

Tidak yakin siapa kode itu tetapi kelihatannya mudah:

document.observe('dom:loaded', function(){
  var _test = document.createElement('input');
  if( ! ('placeholder' in _test) ){
    //we are in the presence of a less-capable browser
    $$('*[placeholder]').each(function(elm){
      if($F(elm) == ''){
        var originalColor = elm.getStyle('color');
        var hint = elm.readAttribute('placeholder');
        elm.setStyle('color:gray').setValue(hint);
        elm.observe('focus',function(evt){
          if($F(this) == hint){
            this.clear().setStyle({color: originalColor});
          }
        });
        elm.observe('blur', function(evt){
          if($F(this) == ''){
            this.setValue(hint).setStyle('color:gray');
          }
        });
      }
    }).first().up('form').observe('submit', function(evt){
      evt.stop();
      this.select('*[placeholder]').each(function(elm){
        if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
      });
      this.submit();
    });
  }
});

1
Plugin ini memerlukan perpustakaan prototipe juga
rosswil

0

Saya mencari di internet dan menemukan kode jquery sederhana untuk menangani masalah ini. Di pihak saya, itu diselesaikan dan dikerjakan yaitu 9.

$("input[placeholder]").each(function () {
        var $this = $(this);
        if($this.val() == ""){
            $this.val($this.attr("placeholder")).focus(function(){
                if($this.val() == $this.attr("placeholder")) {
                    $this.val("");
                }
            }).blur(function(){
                if($this.val() == "") {
                    $this.val($this.attr("placeholder"));
                }
            });
        }
    });

2
Placeholder Anda menjadi nilainya. Jika Anda mengirimkannya, mereka akan dikirim. Dengan placeholder.js dari jawaban yang benar, bidang dibiarkan kosong
chriscatfr
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.