Заполнитель в IE9

140

Кажется, это очень известная проблема, но все решения, которые я нашел в Google, не работают в моем недавно загруженном IE9.

Какой ваш любимый способ для того , чтобы позволить Placeholderсобственности на inputи textareaтегах?

Необязательно: я потерял на этом много времени и еще не искал requiredнедвижимость. Не могли бы вы дать совет по этому поводу? Очевидно, я могу проверить значение в PHP, но это свойство очень удобно для помощи пользователю.

javascript  html  internet-explorer-9  placeholder 
— chriscatfr
источник
Я вернулся в HTML через 4 года. Это означает, что я открыт для любого совета по замене устаревших инструментов. Перезагружаю почти с нуля. Я пробовал в основном с JQuery и много копий / прошлых результатов из Google, моя последняя попытка
— chriscatfr

Ответы:

185

Плагин HTML5 Placeholder jQuery
- от Матиаса Биненса (соавтор HTML5 Boilerplate и jsPerf )

https://github.com/mathiasbynens/jquery-placeholder

Демо и примеры

http://mathiasbynens.be/demo/placeholder

ps
Я использовал этот плагин много раз, и он работает очень хорошо. Кроме того, он не отправляет текст заполнителя в качестве значения при отправке формы (... настоящая боль, которую я обнаружил с другими плагинами).

— Крис Джейкоб
источник
Мы работаем с кастомной CRM. Я добавил этот код, и все работает, как ожидалось, но они отправляют свои формы через javascript. На кнопке отправки есть onclick="_IW.FormsRuntime.submit(this.form);". Есть ли способ изменить это событие onclick, чтобы сначала очистить заполнители, а затем запустить этот код CRM, который существует в onclick?
— Leeish
1
Я скопировал файл github js в свой код src. По-прежнему нельзя использовать заполнитель.
— Philo
2
Это действительно работает, но использовать его в одностраничных приложениях сложно. Его нужно запускать вручную для динамически добавляемых полей. Помимо этого, отлично работает!
— смец.кевин
1
Спасибо, отличный плагин, но у меня есть одна проблема с ie9: заполнитель исчезает, когда ввод текста находится в фокусе. Это отличается от поведения HTML5
— gerrytan 08
1
Он отлично работает с одним большим "но", $ ('input'). Val () возвращает значение заполнителя, когда ввод пуст. Поскольку я работаю с фреймворком AJAX, эти заполнители отправляются на сервер ...
— Danubian Sailor
21

Думаю, это то, что вы ищете: jquery-html5-placeholder-fix

Это решение использует обнаружение функций (через modernizr ), чтобы определить, поддерживается ли заполнитель. Если нет, добавляет поддержку (через jQuery).

— матовый
источник
2
Он работает, но это не лучший код. Вверху $(this)должна быть назначена переменная, которую можно использовать во всем коде. Обращение $к каждому используемому выражению запрещено $(this)прямо из «Не пишите jQuery Like This 101».
— Sami Samhuri
20
Вы должны быть осторожны с этим кодом, поскольку, если вы отправите форму, значение заполнителя будет отправлено как значение формы. Должен очистить его перед отправкой.
— ericbae
2
@chriscatfr Пожалуйста, подумайте о том, чтобы принять мой ответ ( stackoverflow.com/a/13281620/114140 ), поскольку я чувствую, что он направит пользователей SO к гораздо лучшему решению.
— Крис Джейкоб
Любопытно, так как я новичок в битве функций HTML 5: является ли модернизатор плохим решением или сам jquery-html5-placeholder-fix (или и то, и другое)?
— Snekse
Это просто и элегантно, и мне очень помогло.
— Graumanoz 05
17

Если вы хотите сделать это без использования jquery или моденизатора, вы можете использовать следующий код:

(function(){

     "use strict";

     //shim for String's trim function..
     function trim(string){
         return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
     }

     //returns whether the given element has the given class name..
     function hasClassName(element, className){ 
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return false;
         var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
         return regex.test(element.className);
     }

     function removeClassName(element, className){
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return;
         element.className = elClassName.replace(
             new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
     }

     function addClassName(element, className){
         var elClassName = element.className;
         if(elClassName)
             element.className += " " + className;
         else
             element.className = className;
     }

     //strings to make event attachment x-browser.. 
     var addEvent = document.addEventListener ?
            'addEventListener' : 'attachEvent';
     var eventPrefix = document.addEventListener ? '' : 'on';

     //the class which is added when the placeholder is being used..
     var placeHolderClassName = 'usingPlaceHolder';

     //allows the given textField to use it's placeholder attribute
     //as if it's functionality is supported natively..
     window.placeHolder = function(textField){

         //don't do anything if you get it for free..
         if('placeholder' in document.createElement('input'))
             return;

         //don't do anything if the place holder attribute is not
         //defined or is blank..
         var placeHolder = textField.getAttribute('placeholder');        
         if(!placeHolder)
             return;

         //if it's just the empty string do nothing..
         placeHolder = trim(placeHolder);
         if(placeHolder === '')
             return;

         //called on blur - sets the value to the place holder if it's empty..
         var onBlur = function(){
             if(textField.value !== '') //a space is a valid input..
                 return;
             textField.value = placeHolder;
             addClassName(textField, placeHolderClassName);
         };

         //the blur event..
         textField[addEvent](eventPrefix + 'blur', onBlur, false);

         //the focus event - removes the place holder if required..
         textField[addEvent](eventPrefix + 'focus', function(){
             if(hasClassName(textField, placeHolderClassName)){
                removeClassName(textField, placeHolderClassName);
                textField.value = "";
             }
         }, false);

         //the submit event on the form to which it's associated - if the
         //placeholder is attached set the value to be empty..
         var form = textField.form;
         if(form){
             form[addEvent](eventPrefix + 'submit', function(){
                 if(hasClassName(textField, placeHolderClassName))
                     textField.value = '';
            }, false);
         }

         onBlur(); //call the onBlur to set it initially..
    };

}());

Для каждого текстового поля, которое вы хотите использовать, вам нужно запустить его placeHolder(HTMLInputElement), но я думаю, вы можете просто изменить это по своему усмотрению! Кроме того, выполнение этого способа, а не только при загрузке, означает, что вы можете заставить его работать для входных данных, которых нет в DOM при загрузке страницы.

Обратите внимание, что это работает путем применения класса: usingPlaceHolderк элементу ввода, поэтому вы можете использовать его для его стилизации (например, добавьте правило, .usingPlaceHolder { color: #999; font-style: italic; }чтобы он выглядел лучше).

— Марк Роудс
источник
1
Извините - я действительно не знаю, легко ли это сделать - я думаю, вы хотите отображать фактическое текстовое значение, а не «символы». Единственный прием, который я могу придумать для этого, - это переключить его на ввод текста, если он не имеет фокуса или значения, в противном случае отобразить его как поле пароля.
— Марк Роудс
@StephenPatten Взгляните на мое исправление для заполнителей с полями пароля. Я делаю именно то, что предложил Марк :)
— Чев
8

Вот гораздо лучшее решение. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Я немного адаптировал его для работы только с браузерами под IE10

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

    <script>
    // Placeholder fix for IE
      $('.lt-ie10 [placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
          i.val('').removeClass('placeholder');
          if(i.hasClass('password')) {
            i.removeClass('password');
            this.type='password';
          }     
        }
      }).blur(function() {
        var i = $(this);  
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
          if(this.type=='password') {
            i.addClass('password');
            this.type='text';
          }
          i.addClass('placeholder').val(i.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        //if($(this).validationEngine('validate')) { // If using validationEngine
          $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
              i.val('');
              i.removeClass('placeholder');

          })
        //}
      });
    </script>
    ...
    </html>
— Станислав Писоцкий
источник
не работает в IE8, поскольку IE не позволяет jQuery управлять типами ввода (см. комментарий Билла от 20 декабря 2011 г. в 13:48 на bavotasan.com/2011/html5-placeholder-jquery-fix )
— forste
также предполагает, что вы отправляете форму. Большинство одностраничных приложений, которые я видел, не используют формы. просто щелкните обработчики.
— chovy
5

Если вы хотите ввести описание, вы можете использовать это. Это работает в IE 9 и во всех других браузерах.

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
— Эрдем КАЯ
источник
1
Сам не тестировал, но предположить, что это не сработает, если вы перейдете к полю вместо того, чтобы щелкнуть его. Я вижу эту ошибку на многих сайтах или на таких, как она.
— eselk
С помощью этого решения вам также необходимо проверить это значение при отправке формы.
— Игорь Еросимич
Я удивлен, что это получило какие-либо голоса, это не должно использоваться, даже если оно опубликовано в 2012/2013
— LocalPCGuy
Если вы случайно напишите во вход, то, что должно быть заполнителем ('CV2:'), то, что вы набрали, будет удалено.
— Daniel
2

Используя mordernizr для обнаружения браузеров, не поддерживающих Placeholder, я создал этот короткий код, чтобы исправить их.

//If placeholder is not supported
if (!Modernizr.input.placeholder){ 

    //Loops on inputs and place the placeholder attribute
    //in the textbox.
    $("input[type=text]").each( function() { 
       $(this).val($(this).attr('placeholder')); 
    })
}
— Этьен Дюпюи
источник
2
Вы должны быть осторожны с этим кодом, поскольку, если вы отправите форму, значение заполнителя будет отправлено как значение формы. Вы должны очистить его перед отправкой.
— chriscatfr
3
@chriscatfr: Как правильно это сделать в этом примере? Если мой заполнитель - «Пароль», а мой пароль - «Пароль»?
— Lain
Вы можете использовать понятие «грязный» для таких полей. Отметьте поле как чистое при вводе (можно использовать data-dirty = "false"). Если они отправят форму без изменения текста заполнителя, вы увидите, что поле чистое, поэтому очистите его. Если они его изменили, даже на то же значение, что и заполнитель, то он грязный, и вы отправляете это значение.
— oooyaya
пароль и другое решение можно найти на странице jsfiddle.net/AlexanderPatel/1pv2174c/3
— Патель,
placeholderсвойство было стандартизовано как строка => на самом деле нет необходимости в Modernizr ::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }тест на отсутствие поддержки, тестирование в режиме эмуляции IE9 - работает.
— jave.web 01
2

Я знаю, что опаздываю, но я нашел решение, вставив в заголовок тег:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->
Развернуть фрагмент

— декаденца
источник
Вы тестировали это в IE9? Потому что в противном случае IE10 + поддерживает заполнитель ...
— jave.web 01
Конечно, просто странно, что IE9 сам не поддерживает включение тега - тогда это была экспериментальная функция? Это где-то упоминается? :)
— jave.web 02
1

чтобы он работал в IE-9, используйте ниже. он работает для меня

JQuery должен включать:

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

     if(!$.support.placeholder) {

       var active = document.activeElement;

       $(':text, textarea, :password').focus(function () {

       if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
          $(this).val('').removeClass('hasPlaceholder');
        }
      }).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});

$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

Стиль CSS должен включать:

.hasPlaceholder {color: #aaa;}
— Суреш Гупта
источник
1
вам следует исправить здесь свое форматирование, например добавить отступ и отделить ответ от кода
— Даррен
1

Немного опоздал на вечеринку, но я использую свой проверенный и проверенный JS, который использует преимущества Modernizr . Можно скопировать / вставить и применить к любому проекту. Работает каждый раз:

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

}
— egr103
источник
Все эти решения с использованием jQuery .. разве нет решения без раздутого jQuery?
— Спок
0

Я обычно очень высоко отношусь к http://cdnjs.com/, и они перечисляют:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

Не уверен, что это за код, но это выглядит просто:

document.observe('dom:loaded', function(){
  var _test = document.createElement('input');
  if( ! ('placeholder' in _test) ){
    //we are in the presence of a less-capable browser
    $$('*[placeholder]').each(function(elm){
      if($F(elm) == ''){
        var originalColor = elm.getStyle('color');
        var hint = elm.readAttribute('placeholder');
        elm.setStyle('color:gray').setValue(hint);
        elm.observe('focus',function(evt){
          if($F(this) == hint){
            this.clear().setStyle({color: originalColor});
          }
        });
        elm.observe('blur', function(evt){
          if($F(this) == ''){
            this.setValue(hint).setStyle('color:gray');
          }
        });
      }
    }).first().up('form').observe('submit', function(evt){
      evt.stop();
      this.select('*[placeholder]').each(function(elm){
        if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
      });
      this.submit();
    });
  }
});
— cwd
источник
1
Этот плагин также требует библиотеки прототипов
— rosswil
0

Я поискал в Интернете и нашел простой код jquery для решения этой проблемы. На моей стороне это было решено и работало на ie 9.

$("input[placeholder]").each(function () {
        var $this = $(this);
        if($this.val() == ""){
            $this.val($this.attr("placeholder")).focus(function(){
                if($this.val() == $this.attr("placeholder")) {
                    $this.val("");
                }
            }).blur(function(){
                if($this.val() == "") {
                    $this.val($this.attr("placeholder"));
                }
            });
        }
    });
— Гюнай Гюлтекин
источник
2
ваш заполнитель становится ценностью. Если вы отправите, они будут отправлены. С правильным ответом placeholder.js поля остаются пустыми
— chriscatfr
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.