Bagaimana cara mendukung atribut placeholder di IE8 dan 9


132

Saya punya masalah kecil, placeholderatribut untuk kotak input tidak didukung di IE 8-9.

Apa cara terbaik untuk membuat dukungan ini di proyek saya (ASP Net). Saya menggunakan jQuery. Perlu saya menggunakan beberapa alat eksternal lainnya untuk itu?

Apakah http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html solusi yang baik?


7
Sudut Pedant: itu adalah atribut, bukan tag. Tag memiliki tanda kurung di sekitarnya (seperti <input>); atribut adalah pasangan nilai kunci di dalam kurung-runcing (seperti placeholder="This is an attribute value"). Meninggalkan pertanyaan apa adanya, sehingga calon orang yang mengajukan pertanyaan yang sama dapat menemukannya.
Paul D. Waite

2
Tautan itu tidak berfungsi apa adanya. Saya menghapus tanda kutip tambahan di sekitar pemilih $ ("[placeholder]") dan itu tidak masalah.
claptimes

1
Solusi dalam tautan itu juga tidak menangani kotak kata sandi sesuai dukungan asli di webkit
geedubb

1
Tautan yang Anda berikan bekerja dengan sangat baik - terlepas dari kata sandi, program ini sangat menarik dan tidak dapat
disederhanakan

1
tautannya adalah perbaikan yang bagus
Pixelomo

Jawaban:


89

Anda dapat menggunakan plugin jQuery ini: https://github.com/mathiasbynens/jquery-placeholder

Tetapi tautan Anda tampaknya juga merupakan solusi yang baik.


2
Tautan yang disarankan dalam pertanyaan tidak berhasil untuk saya; itu memiliki masalah dengan formulir kirim. Solusi yang Anda sarankan dalam jawaban ini tampaknya jauh lebih kuat dan bekerja dengan baik.
Jonny White

Sebenarnya saya sudah mencoba yang ini dan berfungsi dengan baik - tetapi segera setelah saya memuat lightbox dengan formulir dan bidang kata sandi, semuanya berfungsi tetapi tidak pada bidang kata sandi - semuanya kosong.
Jurik

6
di placeholder kata sandi IE8 saya ada di titik
Mladen Janjetovic

Saya juga tidak bisa melihatnya di ie8. Saya mengatasinya dengan hanya memiliki beberapa tampilan teks di atas bidang ketika di ie8.
jhawes

jQuery-placeholder berperilaku berbeda. Ini menghapus placeholder pada fokus alih-alih ketika pengguna mulai mengetik sesuatu di lapangan seperti perilaku normal di Firefox untuk placeholder.
supertonsky

89

Anda dapat menggunakan salah satu dari polyfill ini:

Script ini akan menambahkan dukungan untuk placeholderatribut di browser yang tidak mendukungnya, dan mereka tidak memerlukan jQuery!


4
Saya membatalkan ini karena saya suka ide solusi non-jquery, tetapi sekarang kode ini memiliki masalah di IE8 sehingga tidak cocok untuk saya. github.com/jamesallardice/Placeholder.js/issues/17
Dan Searle

3
Solusi ini tidak menangani kotak kata sandi
Jurik

2
@Jurik Saya telah menambahkan polyfill tambahan - Saya harap ini membantu.
starbeamrainbowlabs

1
Bahkan distributor dari plugin ini mengatakan bahwa plugin ini tidak menangani bidang kata sandi di <IE9 github.com/jamesallardice/Placeholder.js/issues/…
Jurik

Kolom kata sandi masih tidak berfungsi di iE8. Tautan jawaban yang diterima tampaknya berfungsi di ie8 untuk bidang kata sandi.
Susie

24

yang $ .Browser.msie tidak pada JQuery terbaru lagi ... Anda harus menggunakan $ .support

seperti di bawah ini:

 <script>

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


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>

2
ini berfungsi seperti pesona, saya lebih suka daripada menambahkan plugin, terima kasih banyak
LemonCool

@vsync tidak jika Anda membaca dengan baik saya katakan plugin, jamak, sebagian besar opsi yang saya temukan Anda perlu menggunakan beberapa file, dengan banyak kode, vs beberapa baris. bukankah Anda sedikit arogan, dan bagaimana komentar itu meningkatkan jawabannya
LemonCool

Ini seharusnya tidak benar-benar digunakan. Ini untuk penggunaan internal jQuery dan dapat dihapus kapan saja. api.jquery.com/category/deprecated/deprecated-1.9
Will

3

jika Anda menggunakan jquery, Anda dapat melakukannya seperti ini. dari situs ini Placeholder dengan Jquery

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

ini adalah tautan alternatif

  1. Perpustakaan jquery Placeholder
  2. HTML5 polyfill - buka bagian placeholder

3
Jawaban ini berfungsi, tetapi Anda harus mengikuti tautan untuk fungsionalitas lengkap. Kode di sini saja tidak akan berfungsi.
Hawkee

1
ofc itu tidak akan berfungsi, ini adalah kode ejekan! mengapa Anda mengikat "form" yang sama berulang-ulang untuk submitacara tersebut? apa hubungannya acara ajukan dengan apa pun
vsync

apa yang akan terjadi, jika saya mengetik teks yang sama seperti pada teks placeholder di IE8 ???
Bimal Das

3

Saya memiliki masalah kompatibilitas dengan beberapa plugin yang saya coba, menurut saya ini adalah cara paling sederhana untuk mendukung placeholder pada input teks:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}

apakah itu mendukung untuk IE9?
Viku

2
$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

        $("[placeholder]").parents("form").submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            })
        });
    }
});

coba ini


1

Saya menggunakan ini, ini hanya Javascript.

Saya hanya memiliki elemen input dengan nilai, dan ketika pengguna mengklik elemen input, itu mengubahnya menjadi elemen input tanpa nilai.

Anda dapat dengan mudah mengubah warna teks menggunakan CSS. Warna pengganti adalah warna dalam id #IEinput, dan warna teks yang Anda ketik adalah warna dalam id #email. Jangan gunakan getElementsByClassName, karena versi IE yang tidak mendukung placeholder, juga tidak mendukung getElementsByClassName!

Anda dapat menggunakan placeholder dalam input kata sandi dengan mengatur jenis input kata sandi asli ke teks.

Tinker: http://tinker.io/4f7c5/1 - server JSfiddle sedang down!

* Maaf untuk bahasa Inggris saya yang buruk

JAVASCRIPT

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

3
Placeholder harus kembali jika bidang kosong dan fokus hilang
Chris Pratt

1

Untuk yang lain mendarat di sini. Inilah yang bekerja untuk saya:

//jquery polyfill for showing place holders in IE9
$('[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('');
        }
    })
});

Cukup tambahkan ini di file script.js Anda. Courtesy of http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html


0

Karena sebagian besar solusi menggunakan jQuery atau tidak memuaskan ini seperti yang saya harapkan, saya menulis cuplikan untuk mootool sendiri.

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

Saya akui itu terlihat lebih LEBIH BANYAK daripada yang lain tetapi berfungsi dengan baik. __ placeholder adalah kelas ccs untuk membuat warna teks placeholder menjadi mewah.

Saya menggunakan fix_placeholder di window.addEvent ('domready', ... dan untuk setiap kode tambahan yang ditambahkan seperti popup.

Harap Anda menyukainya.

Salam.



0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

0

Tambahkan kode di bawah ini dan itu akan dilakukan.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Unduh kode lengkap dan demo dari https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip


0

Berikut adalah fungsi javascript yang akan membuat placeholder untuk IE 8 dan di bawahnya dan berfungsi juga untuk kata sandi:

/* 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>


-1
    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

$ .browser.msie tidak lagi didukung. Coba gunakan deteksi fitur.
invot
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.