Заполнитель атрибута не поддерживается в IE. Какие-либо предложения? - PullRequest
20 голосов
/ 14 октября 2011

Что вы все используете для поддержки атрибутов заполнителей в браузерах?

В настоящее время использую:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

Также пробовал этот плагин безрезультатно:

https://github.com/danbentley/placeholder

Но, похоже, он не работает с IE ... Точнее, с IE 8. Любые другие предложения / альтернативы?

Должен ли я сейчас забыть об атрибуте заполнителя?

Ответы [ 7 ]

14 голосов
/ 14 октября 2011

Вы правы, что IE8 не поддерживает атрибут placeholder.placeholder является частью спецификации HTML5, а IE8 был выпущен задолго до того, как задумался о HTML5.

Лучший способ беспрепятственно справиться с этим - использовать инструмент, подобный Modernizr. чтобы определить, поддерживает ли браузер функцию заполнителя, и запустить сценарий полизаполнения JS, если он не поддерживается.

if(!Modernizr.input.placeholder) {
    //insert placeholder polyfill script here.
}

Существует множество сценариев заполнителя заполнителя, которые можно загрузить.Выберите тот, который использует атрибут placeholder, так что вам нужно только определить строку-заполнитель в одном месте для всех браузеров.Вот один из них, который вы можете попробовать: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Надеюсь, это поможет.

6 голосов
/ 20 декабря 2012

Вот код прямо из моего проекта, который изначально работает в Chrome и использует polyfill в IE8 ... здесь есть предупреждение для тестирования, которое показывает, когда вызывается polyfill. Вам необходимо загрузить Modernizr в качестве предварительного условия для использования этого кода, но простой скрипт, включенный в ваш <head> раздел, подойдет.

<script type="text/javascript">
    $('document').ready(function () {
        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('');
                    }
                })
            });

            alert("no place holders");
        }
    });
</script>
2 голосов
/ 25 февраля 2013

Со всеми другими ответами и примерами, на которые я смотрел, я обнаружил некоторые проблемы. Я написал свое собственное решение для решения этих проблем и решил опубликовать его здесь. Мой код будет корректно обрабатывать две вещи, с которыми другие решения, похоже, имеют проблемы:

  1. Если вы действительно хотите ввести текст, содержащийся в качестве заполнителя, в качестве значения, мой код не будет считать, что это заполнитель, и откажется от ввода.
  2. Если вы нажмете кнопку обновления в IE, она не будет автоматически заполнять поля значениями-заполнителями.

Включить Modernizr и JQuery следующим образом:

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

Добавьте немного CSS, например:

<style type="text/css" media="all">
.placeholder {
    color: #aaa;
}
</style>

Тогда основной код, который вам нужен:

<script type="text/javascript">

$(document).ready(function() {

    // Only do anything if the browser does not support placeholders
    if (!Modernizr.input.placeholder) {

        // Format all elements with the placeholder attribute and insert it as a value
        $('[placeholder]').each(function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
            $(this).focus(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                    $(this).removeClass('placeholder');
                }
            }).blur(function() {
                if($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                    $(this).addClass('placeholder');
                }
            });
        });

        // Clean up any placeholders if the form gets submitted
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        });

        // Clean up any placeholders if the page is refreshed
        window.onbeforeunload = function() {
            $('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        };
    }
});

</script>
2 голосов
/ 06 ноября 2011

Существует довольно много сценариев полизаполнения для атрибута заполнителя.Вот тот, который, кажется, работает хорошо .

Просто не забудьте вызвать $('input, textarea').placeholder(); в своем коде JS и, возможно, добавить правило CSS, например..placeholder { color: #aaa }.

1 голос
/ 19 октября 2011

Фактически ни один из IE по состоянию на 19 октября 2011 года не поддерживает атрибут placeholder.Я проверил это в 7, 8 и 9, и никто из них, кажется, не узнал это.Можно подумать, что ie9, видя, как это должно поддерживать css3 и html5, исправило бы это, но это не так.

В качестве простого обходного пути, которое не красиво, но выполняет работу, которую вы можете использоватьнекоторый javascript как это:

<input type="text" value="Enter ZIP"
  onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />
0 голосов
/ 18 октября 2013

Я боролся с этим сам. Я нашел работу вокруг. Это работает довольно хорошо в моем IE8 и в Chrome. Я разработал классную работу и объяснил это ниже ...

HTML

 <input type="text" class="input-remover badinput" value="Business Name">
 <input type="text" class="input-remover badinput" value="Business Address 1">
 <input type="text" class="input-remover badinput" value="Business Address 2">
 <input type="text" class="input-remover badinput" value="City">

Все поля ввода с классом input-remover будут затронуты. Просто поместите слова, которые вы хотите использовать в качестве заполнителя внутри значения. Класс badinput используется для того, чтобы вы могли запретить кому-либо отправлять поля ввода со значениями по умолчанию.

JQuery

var textval

 $(".input-remover").click(function(){
textval = this.value;
$(this).addClass("currentspot");

if ($(this).hasClass("placeholder"))
{

}else{

$(this).val("");

}

 });


 $("input").keypress(function(){
$(".currentspot").removeClass("badinput");
$(".currentspot").addClass("placeholder");

 });


 $("input").blur(function(){

if ($(this).hasClass("placeholder"))
{


$(".currentspot").removeClass("currentspot");

}else{

$(".currentspot").val(textval);
$(".currentspot").removeClass("currentspot");

}

 });

Честно, я бы объяснил эту часть, но я действительно думаю, что было бы легче сказать, не редактируйте ее. Это хорошо, так оно и есть. Да, возможно, вы могли бы изменить его, но я бы избегал его, если вы не знаете, что вы делаете, чтобы не дать ему подействовать.

И я также включил JsFiddle, показывающий, как это работает. Я надеюсь, что это помогает. Я считаю, что большинство из этих вещей, которые мне нравятся, - это снаряжение но по крайней мере это делает с тех пор. Удачи!

Скрипка Here

0 голосов
/ 14 октября 2011

Это то, что я использовал в одном из моих проектов.Единственное, что мне нужен только заполнитель для одного элемента, так что он может не сработать для вашей ситуации сразу.Но просто чтобы понять, насколько простой код:

(function(){
    var nameInput = document.getElementById('your-id-here');
    var placeHolderSupport = ("placeholder" in document.createElement("input"));
    if( !placeHolderSupport )
    {
        //show hint in gray
        var placeholder = nameInput.getAttribute('placeholder');
        nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
        nameInput.onblur  = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
        nameInput.onblur();
    }
})()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...