Bagaimana cara mendukung atribut placeholder di IE8 dan 9

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?

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

Tetapi tautan Anda tampaknya juga merupakan solusi yang baik.

Anda dapat menggunakan salah satu dari polyfill ini:

• https://github.com/jamesallardice/Placeholder.js (tidak mendukung bidang kata sandi)
• https://github.com/chemerisuk/better-placeholder-polyfill

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

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>

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

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"));
        }
    });
}

$(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

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>

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

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.

Saya menggunakan kode tautan ini http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Tetapi dalam deteksi browser saya menggunakan:

if (navigator.userAgent.indexOf('MSIE') > -1) {
 //Your placeholder support code here...
}

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

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

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>

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