Як підтримувати атрибут заповнювача в IE8 та 9


132

У мене є невелике питання placeholder атрибут полів введення не підтримується в IE 8-9.

Який найкращий спосіб заручитися цією підтримкою в моєму проекті (ASP Net). Я використовую jQuery. Чи потрібно використовувати для цього інші зовнішні інструменти?

Чи хороше рішення http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html ?


7
Куточок педанта: це атрибут, а не тег. Тег має точкові дужки навколо нього (як <input>); атрибут - пара ключових значень у точкових дужках (як placeholder="This is an attribute value"). Залишаючи питання як є, щоб майбутні люди, які задають те саме питання, змогли його знайти.
Пол Д. Уейт

2
Це посилання не працювало як є. Я видалив зайві цитати навколо селектора $ ("[placeholder]"), і це було добре.
claptimes

1
Рішення в цьому посиланні також не обробляє коробки паролів відповідно до нашої підтримки в веб-програмі
geedubb

1
Посилання, яке ви надали, справді працює дуже добре - окрім паролів, воно працює і не може бути простішим у налаштуванні
hobailey

1
посилання є чудовим виправленням
Pixelomo

Відповіді:


89

Ви можете використовувати цей плагін jQuery: https://github.com/mathiasbynens/jquery-placeholder

Але ваше посилання здається також хорошим рішенням.


2
Посилання, запропоноване у питанні, для мене не працювало; у нього виникли проблеми з поданням форми. Рішення, яке ви запропонували у цій відповіді, здається набагато надійнішим і спрацювало частування.
Jonny White

Насправді я спробував це, і він працює чудово - але як тільки я завантажую лайтбокс із формою та полем пароля, все працює, але не поле пароля - він просто порожній.
Юрік

6
в моєму IE8 заповнювач пароля знаходиться в крапках
Младен Яньєтович

Я також не бачу його в ie8. Я працював над цим, просто провівши текст над полями, коли в ie8.
jhawes

jQuery-placeholder поводиться по-різному. Він знімає заповнювач місця на фокусі замість того, коли користувач починає набирати щось на полі, як звичайна поведінка у Firefox для заповнювачів.
супертонський

89

Ви можете використовувати будь-яке з цих поліфілів:

Ці скрипти додадуть підтримку placeholderатрибуту в браузерах, які не підтримують його, і їм не потрібен jQuery!


4
Я підтримав це, тому що мені подобається ідея рішення, що не потребує запитів, але зараз цей код має проблеми в IE8, тому він не підходить для мене. github.com/jamesallardice/Placeholders.js/isissue/17
Dan Searle

3
Це рішення не обробляє коробки паролів
Jurik

2
@Jurik Я додав додатковий поліфайл - сподіваюся, що це допоможе.
starbeamrainbowlabs

1
Навіть розповсюджувач цього плагіна каже, що цей плагін не обробляє поля паролів у <IE9 github.com/jamesallardice/Placeholders.js/isissue/…
Jurik

Поле пароля все ще не працює в iE8. Здається, прийняте посилання на відповідь працює в поле ie8 для пароля.
Сузі

24

$ .Browser.msie не на останньому JQuery більше ... Ви повинні використовувати $ .Підтримка

як нижче:

 <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
це працює як шарм, мені це подобається краще, ніж додавати плагіни, дякую багато
LemonCool

@vsync ні, якщо ви добре читаєте, я сказав, що плагіни, множина, більшість варіантів, які я знайшов, вам потрібно використовувати декілька файлів, з тоннами коду, порівняно з декількома рядками. ви не трохи зарозумілі, і як цей коментар покращує відповідь
LemonCool

Це насправді не слід використовувати. Це для внутрішнього використання jQuery і його можна буде видалити будь-коли. api.jquery.com/category/deprecated/deprecated-1.9
Чи буде

3

якщо ви використовуєте jquery, ви можете зробити так. з цього сайту Замовник з Jquery

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

це альтернативні ланки

  1. Бібліотека jquery-заповнювача
  2. HTML5 поліфауни - перейдіть до розділу заповнювачів

3
Ця відповідь працює, але для повного функціонування вам потрібно перейти за посиланням. Код тут не працює.
Хокі

1
Часто це не спрацює, це глузування! чому ви пов'язуєте знову і знову ту саму «форму» для submitподії? що стосується події подання
всинк

що станеться, якщо я введу той самий текст, що і в тексті заповнювача в IE8 ???
Бімал Дас

3

У мене виникли проблеми із сумісністю з декількома плагінами, які я спробував, мені здається, це найпростіший спосіб підтримки заповнювачів на текстових введеннях:

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

це підтримує IE9?
Віку

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

спробуйте це


1

Я використовую цей, це лише Javascript.

У мене просто є елемент введення зі значенням, і коли користувач натискає на вхідний елемент, він змінює його на елемент введення без значення.

Ви можете легко змінити колір тексту за допомогою CSS. Колір заповнювача - це колір у id #IEinput, а кольором, який буде набраний текст, є колір у id #email. Не варто використовуйте getElementsByClassName, оскільки версії IE, які не підтримують заповнення, не підтримують і getElementsByClassName!

Ви можете використовувати заповнювач місця для введення пароля, встановивши тип початкового введення пароля до тексту.

Тинкер: http://tinker.io/4f7c5/1 Тинкер - сервери JSfiddle не працюють!

* вибачте за мою погану англійську

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
Якщо заповнювач заповнюється, поле заповнюється, а фокус втрачено
Chris Pratt

1

Для інших, які тут приземляються. Це для мене працювало:

//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('');
        }
    })
});

Просто додайте це у файл script.js. Надано http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html


0

Оскільки більшість рішень використовує jQuery або це не задовольняє, як я цього хотів, я написав для себе фрагмент для mootools.

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

}

Зізнаюся, це виглядає трохи БОЛЬШЕ за інших, але це чудово працює. __ placeholder - клас ccs, щоб зробити колір тексту-заповнювача фантазійним.

Я використав fix_placeholder у window.addEvent ('domready', ... і для будь-якого додатково доданого коду, як спливаючі вікна.

Сподіваюся, вам сподобається.

З повагою.




0

Додайте код нижче, і це буде зроблено.

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

Завантажте повний код та демонстраційну версію з https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip


0

Ось функція javascript, яка створить заповнювачі для IE 8 і нижче, і вона також працює для паролів:

/* 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 більше не підтримується. Спробуйте використовувати функцію виявлення функцій.
інвот
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.