Введіть заповнювачі для Internet Explorer


175

HTML5 представив placeholderатрибут на inputелементах, що дозволяє відображати сірий текст за замовчуванням.

На жаль, Internet Explorer, включаючи IE 9, не підтримує його.

Там уже є деякі сценарії симулятора заповнення заповнювачів. Зазвичай вони працюють, вводячи текст за замовчуванням у поле введення, надаючи йому сірий колір та видаляючи його знову, як тільки ви фокусуєте поле введення.

Недолік такого підходу полягає в тому, що текст заповнювача знаходиться в полі введення. Таким чином:

  1. сценарії не можуть легко перевірити, чи поле введення порожнє
  2. обробка на стороні сервера повинна перевіряти значення за замовчуванням, щоб не вставити заповнювач місця в базу даних.

Я хотів би мати рішення, коли текст заповнювача не знаходиться у самому введенні.

Відповіді:


151

Дивлячись на «Web Forms: вхідний заповнювачем» розділ Polyfills HTML5 крос - браузер , один я бачив , був JQuery-html5-заповнювач .

Я спробував демонстрацію за допомогою IE9, і, схоже, він обертає вас <input>прольотом і накладає мітку з текстом заповнювача.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

Є й інші лайки, але я на них не дивився. Один з них, Placeholders.js , рекламує себе як "Ніяких залежностей (тому не потрібно включати jQuery, на відміну від більшості скриптів полізаповнення заповнювача)".

Редагувати: Для тих, хто більше цікавиться питанням "як", що "що", як створити розширений поліфайл заповнення HTML5, який проходить процес створення плагіна jQuery, який робить це.

Крім того, див. Утримуйте заповнення заповнення уваги в IE10 для коментарів про те, як текст заповнювача зникає у фокусі з IE10, який відрізняється від Firefox та Chrome. Не впевнений, чи є рішення цієї проблеми.


2
Для мене добре працювали в IE7, IE8 та IE9.
Марк Руммель

2
Цей плагін більше не підтримується, і він має багато відомих проблем.
Ян Данн

13
Downvote? Відповідь містила посилання на інші лайки. Оновлено, щоб включити не jQuery.
Кевін Хакансон

Сторінка плагіну github вже не існує. Ось ще одна .

1
Не надто великий вентилятор, який спричиняє зміну вводу, рекомендую переглянути відповідь Ніка нижче. він використовує прозорий наклад, а не змінює значення вводу
Натан Трегілл

38

Найкращий з мого досвіду - https://github.com/mathiasbynens/jquery-placeholder (рекомендується html5please.com ). http://afarkas.github.com/webshim/demos/index.html також має гарне рішення серед значно більш масштабної бібліотеки поліфілів.


3
Поставте +1 до цього через jQuery-html5-заповнювач. Це виглядає набагато приємніше і обробляє деякі крайові випадки, пропущені іншим (наприклад, приховані поля)
andygeers

2
Треба сказати, що цього разу StackOverflow дав погану пораду. jQuery Placeholder не очищає введення при натисканні на IE.
звільнений

12

З реалізацією jQuery ви можете ЛЕГКО видаляти значення за замовчуванням, коли настає час подати. Нижче наведено приклад:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

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

Спочатку налаштуйте форму та додайте атрибути-заповнювачі на вхідні теги.

<input placeholder="enter your email here">

Просто скопіюйте цей код і збережіть його як placeholder.js.

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

Використовувати лише на одному вході

$('#myinput').placeHolder();  // just one

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

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

Чи можете ви створити загадку / демонстрацію для вищезазначеного, що допоможе і мені, і майбутньому глядачеві.
користувач2086641

Чи підтримує він поле для пароля.
user2681579

6

Спробувавши кілька пропозицій та побачивши проблеми в IE, ось що працює:

https://github.com/parndt/jquery-html5-placeholder-shim/

Що мені сподобалось - ви просто включите файл js. Не потрібно ініціювати це чи щось.


Після використання цього заповнювача добре працює, тобто, але якщо у них є будь-яка помилка форми, під час відображення помилки форми текст заповнювача тексту не вирівнюється з поля введення, я намагався вирішити, але не в змозі зробити це. Можливо, ви вкажете мені, як вирішити .
user2681579

Мені це дуже подобається, ніж версії, що змінюють значення. Бажаю, щоб версія html5 власників місць працювала і таким чином! (тобто залишити заповнювач, поки не буде введено якийсь текст, а не втратити значення на фокусі)
Натан Трегілл

4
  • Працює лише для IE9 +

Наступне рішення пов'язує елементи введення текстових елементів з атрибутом заповнення. Він імітує поведінку заповнювача лише для IE і очищає поле значення введення при подачі, якщо воно не змінюється.

Додайте цей скрипт, і IE, здається, підтримує HTML5-заповнювачі.

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});

1
Багато користувачів все ще використовують IE8, а деякі навіть використовують IE7. Тож я б не пішов на це, якщо він їх не підтримує
rzr

4

Я пропоную вам просту функцію:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

А щоб скористатися цим, зателефонуйте таким чином:

bindInOut($('#input'),'Here your value :)');

2

Я знайшов досить просте рішення за допомогою цього методу:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

це хакерство jquery, і воно прекрасно працювало на моїх проектах


Цей варіант переосмислює всіх, тому він працюватиме для всіх браузерів незалежно від IE, WebKit або Opera
pankajdoharey

2

Ви можете використовувати:

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);

2

Просто так:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});


1

Я придумав простий скрипт-заповнювач JQuery, який дозволяє користувальницький колір та використовує іншу поведінку очищення входів при фокусуванні. Він замінює заповнювач за замовчуванням у Firefox та Chrome і додає підтримку IE8.

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});

ідеальне рішення, але ви маєте помилку (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // буфер змінити цей рядок на $ (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // буфер
angel.bonev

0

Placeholdr - це надлегкий полегшений поліфункціональний заповнювач, який я написав. Це менше ніж 1 Кб в мінімізованому вигляді

Я переконався, що ця бібліотека вирішує обидва питання:

  1. Placeholdr розширює функцію jQuery $ .fn.val (), щоб запобігти несподіваним значенням повернення, коли текст присутній у полях введення в результаті заповнення. Тож якщо ви дотримуєтесь API jQuery для доступу до значень ваших полів, вам нічого не потрібно буде змінювати.

  2. Placeholdr прослуховує подання форми, і він видаляє текст заповнювача з полів, щоб сервер просто бачив порожнє значення.

Знову ж таки, моя мета з Placeholdr полягає в тому, щоб надати просте рішення, що випадає з проблемою із заповненням. Повідомте мене про Github, чи є ще щось, що вам було б цікаво підтримати Placeholdr.


0

Вставте плагін і перевірте, чи є ідеально відпрацьований quj.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>

0

Ось чиста функція javascript (не потрібен jquery), яка створить заповнювачі для IE 8 і нижче, і вона також працює для паролів. Він читає атрибут заповнення HTML5 та створює прольотний елемент за елементом форми та робить фон елемента форми прозорим:

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


0

ПРИМІТКА: автор цього поліфайлу стверджує, що він "працює в майже будь-якому браузері, який ви можете собі уявити", але згідно з коментарями, це не вірно для IE11, проте IE11 має вбудовану підтримку, як і більшість сучасних браузерів

Placeholders.js - найкраща поліепілятор заповнення, яку я бачив, має легку вагу, не залежить від JQuery, охоплює інші старі браузери (не лише IE) та має варіанти для прихованого введення та заповнення заповнювачів.


1
@Niclas IE9 і вище має власну підтримку для заповнювачів.
Гексод

Я додав примітку до цієї відповіді із посиланням на каніусу для заповнювачів.
Дейв Еверітт

-1

Я використовую jquery.placeholderlabels . Він заснований на це і може бути призначався тут .

працює в ie7, тобто 8, тобто9.

поведінка імітує поточну фаєрфокс та хромовану поведінку - там, де текст «заповнювача» залишається видимим у фокусі та зникає лише після того, як щось введено в поле.


-1

Я створив свій власний плагін jQuery після того, як засмутився, що існуючі лайки приховатимуть заставку на фокус, що створює неповноцінне користувацьке враження, а також не відповідає тому, як Firefox, Chrome і Safari справляються з ним. Особливо це стосується, якщо ви хочете, щоб вхід було зосереджено, коли сторінка або спливаюче вікно вперше завантажуються, при цьому все ще показуйте заповнювач до введення тексту.

https://github.com/nspady/jquery-placeholder-labels/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.