Заповнювач місця в IE9


140

Здається, це дуже відома проблема, але всі знайдені нами рішення в Google не працюють на моєму недавно завантаженому IE9.

Який ваш улюблений спосіб ввімкнути Placeholderвластивість у тегах inputта textareaтегах?

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


Я повернувся до HTML після 4 років. Це означає, що я відкритий для будь-якої поради щодо заміни застарілих інструментів. Я перезапускаю майже з нуля. Я намагався в основному з JQuery та багатьма копіями / минулими результатами в Google, моя остання спроба
chriscatfr

Відповіді:


185

Плагін HTML5 Placeholder jQuery
- автор Mathias Bynens (співавтор на 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?
Ліїш

1
я скопіював файл github js у свій код src. Ще не йдіть із заповнювачем.
Філон

2
Це дійсно працює як приємне лікування, однак використовуватись у програмах на одній сторінці боляче. Потрібно запустити його вручну для динамічно доданих полів. Крім цього, чудово працює!
smets.kevin

1
Дякую, акуратний плагін, проте одна з проблем, пов’язаних із I9, заповнювач місця зникає, коли введення тексту фокусується. Це відрізняється від поведінки HTML5
gerrytan

1
Це добре працює з одним великим «але», $ ('input'). Val () повертає значення заповнювача, коли вхід порожній. Оскільки я працюю з AJAX фреймворком, ці заповнювачі надсилаються на сервер ...
Дунайський моряк

21

Я думаю, що це те, що ти шукаєш: jquery-html5-placeholder-fix

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


2
Це працює, але це не найбільший код. Вгорі $(this)повинна бути призначена змінна, яка може використовуватися у всьому коді. Заклик $до кожного вираження, яке використовує, $(this)є ні-ні прямо з "Не пишіть jQuery, як це 101".
Самі Самхурі

20
Ви повинні бути обережними з цим кодом, оскільки якщо ви подасте форму, значення заповнення буде подано як значення форми. Потрібно очистити її до того, як вона надійде.
ericbae

2
@chriscatfr Будь ласка, подумайте про прийняття моєї відповіді ( stackoverflow.com/a/13281620/114140 ), оскільки я вважаю, що це спрямовуватиме користувачів SO до набагато кращого рішення.
Кріс Якоб

Цікаво, оскільки я новачок у битві з функціями HTML 5: чи це модернізатор, що спричиняє це погане рішення, або ж jquery-html5-placeholder-fix (або обидва)?
Снексе

Це просто і елегантно і зробило роботу для мене.
грауманоз

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:"), те, що ви ввели, буде видалено.
Даніель

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: Як би це зробити правильно в цьому прикладі? Якщо мій заповнювач - "Пароль", а мій пароль - "Пароль"?
Пролежав

Ви можете використовувати поняття "брудний" для подібних полів. Позначте поле як чисте при введенні (можливо, використовуйте data-dirty = "false"). Якщо вони подадуть форму, не змінюючи текст заповнення, ви побачите, що поле чисте, тому очистіть його. Якщо вони змінили його, навіть на те саме значення, що і заповнювач, це брудно, і ви подаєте це значення.
oooyaya

щодо пароля та іншого рішення, будь ласка, подивіться на jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel

placeholderвластивість було стандартизовано як string => немає необхідності в Modernizr фактично ::::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }це доцільний тест на непідтримуваний, перевірений в режимі IE9 емуляція - працює.
jave.web

2

Я знаю, що я спізнююсь, але я знайшов рішення, що вставляє в голову тег:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->


Ви протестували це в IE9? Тому що в іншому випадку IE10 + підтримує заповнення заповнення ...
jave.web

Звичайно, це просто дивно, що IE9 не підтримує його сам тегом, щоб увімкнути його - чи було це експериментальною функцією відтворення? Це десь посилається? :)
jave.web

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 Style потрібно включати:

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

}

Усі ці рішення, що використовують 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();
    });
  }
});

1
Цей плагін вимагає і бібліотеки-прототипу
rosswil

0

Я шукав в Інтернеті і знайшов простий код jquery для вирішення цієї проблеми. З мого боку, це було вирішено і працювали над 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.