Masukan placeholder untuk Internet Explorer

HTML5 memperkenalkan placeholderatribut pada inputelemen, yang memungkinkan untuk menampilkan teks default greyed-out.

Sayangnya Internet Explorer, termasuk IE 9 tidak mendukungnya.

Sudah ada beberapa skrip simulator placeholder di luar sana. Mereka biasanya bekerja dengan menempatkan teks-standar ke dalam bidang input, memberinya warna abu-abu dan menghapusnya lagi segera setelah Anda memfokuskan bidang input.

Kelemahan dari pendekatan ini adalah teks placeholder ada di bidang input. Jadi:

1. skrip tidak dapat dengan mudah memeriksa apakah bidang input kosong
2. pemrosesan sisi server harus memeriksa terhadap nilai default, agar tidak memasukkan placeholder ke dalam database.

Saya ingin memiliki solusi, di mana teks placeholder tidak ada dalam input itu sendiri.

Dalam melihat bagian "Formulir Web: input placeholder" dari HTML5 Cross Browser Polyfills , yang saya lihat adalah jQuery-html5-placeholder .

Saya mencoba demo dengan IE9, dan sepertinya membungkus Anda <input>dengan rentang dan melapisi label dengan teks placeholder.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

Ada juga shim lain di sana, tetapi saya tidak melihat semuanya. Salah satunya, Placeholder.js , mengiklankan dirinya sebagai "Tidak ada dependensi (jadi tidak perlu menyertakan jQuery, tidak seperti kebanyakan skrip polyfill placeholder)."

Sunting: Bagi mereka yang lebih tertarik pada "bagaimana" itu "apa", Cara membuat polyfill placeholder HTML5 canggih yang berjalan melalui proses membuat plugin jQuery yang melakukan ini.

Juga, lihat teruskan placeholder pada fokus di IE10 untuk komentar tentang bagaimana teks placeholder menghilang pada fokus dengan IE10, yang berbeda dari Firefox dan Chrome. Tidak yakin apakah ada solusi untuk masalah ini.

Yang terbaik dalam pengalaman saya adalah https://github.com/mathiasbynens/jquery-placeholder (direkomendasikan oleh html5please.com ). http://afarkas.github.com/webshim/demos/index.html juga memiliki solusi yang baik di antara perpustakaan polyfill yang jauh lebih luas.

Dengan implementasi jQuery, Anda dapat dengan mudah menghapus nilai default ketika saatnya untuk mengirimkan. Di bawah ini adalah contohnya:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

Saya tahu Anda mencari overlay, tetapi Anda mungkin lebih memilih kemudahan rute ini (sekarang tahu apa yang saya tulis di atas). Jika demikian, maka saya menulis ini untuk proyek saya sendiri dan berfungsi sangat bagus (memerlukan jQuery) dan hanya perlu beberapa menit untuk diterapkan untuk seluruh situs Anda. Ini menawarkan teks abu-abu pada awalnya, abu-abu terang saat dalam fokus, dan hitam saat mengetik. Ini juga menawarkan teks placeholder setiap kali bidang input kosong.

Pertama-tama siapkan formulir Anda dan sertakan atribut placeholder Anda pada tag input.

<input placeholder="enter your email here">

Cukup salin kode ini dan simpan sebagai placeholder.js.

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

Untuk digunakan hanya pada satu input

$('#myinput').placeHolder();  // just one

Inilah yang saya sarankan Anda menerapkannya di semua bidang input di situs Anda ketika browser tidak mendukung atribut placeholder HTML5:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

Setelah mencoba beberapa saran dan melihat masalah di IE, inilah yang berfungsi:

https://github.com/parndt/jquery-html5-placeholder-shim/

Apa yang saya sukai - Anda cukup memasukkan file js. Tidak perlu memulainya atau apa pun.

• Hanya berfungsi untuk IE9 +

Solusi berikut ini mengikat elemen input dengan atribut placeholder. Ini mengemulasi perilaku placeholder hanya untuk IE dan membersihkan bidang nilai input pada pengiriman jika tidak diubah.

Tambahkan skrip ini dan IE tampaknya akan mendukung placeholder HTML5.

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});

Saya menyarankan Anda fungsi sederhana:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

Dan untuk menggunakannya, panggil dengan cara ini:

bindInOut($('#input'),'Here your value :)');

Saya menemukan solusi yang cukup sederhana menggunakan metode ini:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

ini adalah jquery hack, dan bekerja dengan baik pada proyek saya

Kamu bisa memakai :

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);

Sederhana seperti ini:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});

Saya telah menulis plugin jquery untuk menyelesaikan masalah ini .. gratis ..

Direktori JQuery:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Situs: www.kegles.com.br/jquery-placeholder/

Saya datang dengan skrip JQuery placeholder sederhana yang memungkinkan warna kustom dan menggunakan perilaku kliring input yang berbeda ketika fokus. Ini menggantikan placeholder default di Firefox dan Chrome dan menambahkan dukungan untuk IE8.

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});

Placeholdr adalah drop-in tempat penampung jQuery polyfill yang sangat ringan yang saya tulis. Itu kurang dari 1 KB diperkecil.

Saya memastikan bahwa perpustakaan ini mengatasi kedua masalah Anda:

1. Placeholdr memperluas fungsi jQuery $ .fn.val () untuk mencegah nilai pengembalian yang tidak terduga ketika teks hadir di bidang input sebagai hasil dari Placeholdr. Jadi jika Anda tetap menggunakan API jQuery untuk mengakses nilai bidang Anda, Anda tidak perlu mengubah apa pun.

2. Placeholdr mendengarkan pengiriman formulir, dan menghapus teks placeholder dari bidang sehingga server hanya melihat nilai kosong.

Sekali lagi, tujuan saya dengan Placeholdr adalah untuk memberikan solusi drop-in sederhana untuk masalah placeholder. Beri tahu saya di Github jika ada hal lain yang membuat Anda tertarik untuk mendapatkan dukungan Placeholdr.

Untuk menyisipkan plugin dan periksa misal sudah berfungsi dengan baik. Placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

Berikut adalah fungsi javascript murni (tidak diperlukan jquery) yang akan membuat placeholder untuk IE 8 dan di bawahnya dan berfungsi juga untuk kata sandi. Itu membaca atribut placeholder HTML5 dan membuat elemen span di belakang elemen form dan membuat latar belakang elemen form transparan:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))

<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>

CATATAN: penulis polyfill ini mengklaimnya "bekerja di hampir semua browser yang dapat Anda bayangkan" tetapi menurut komentar itu tidak benar untuk IE11, namun IE11 memiliki dukungan asli, seperti halnya sebagian besar browser modern

Placeholder.js adalah polyfill placeholder terbaik yang pernah saya lihat, ringan, tidak bergantung pada JQuery, mencakup browser lama lainnya (bukan hanya IE), dan memiliki opsi untuk hide-on-input dan placeholder yang dijalankan sekali saja.

saya menggunakan jquery.placeholderlabels . Ini berdasarkan ini dan dapat didemokan di sini .

bekerja di ie7, ie8, ie9.

behaviour meniru firefox dan chrome behavior saat ini - di mana teks "placeholder" tetap terlihat pada fokus dan hanya menghilang begitu sesuatu diketik di lapangan.

Saya membuat plugin jQuery saya sendiri setelah menjadi frustrasi karena shims yang ada akan menyembunyikan placeholder pada fokus, yang menciptakan pengalaman pengguna yang lebih rendah dan juga tidak cocok dengan bagaimana Firefox, Chrome dan Safari menanganinya. Ini terutama terjadi jika Anda ingin input difokuskan ketika halaman atau popup pertama kali dimuat, sambil tetap menampilkan placeholder sampai teks dimasukkan.

https://github.com/nspady/jquery-placeholder-labels/