Входные заполнители для Internet Explorer - PullRequest
Новая
       27

Входные заполнители для Internet Explorer

173 голосов
/ 02 апреля 2011

HTML5 ввел атрибут placeholder в элементах input, что позволяет отображать неактивный текст по умолчанию.

К сожалению, Internet Explorer, включая IE 9, не поддерживает его.

Там уже есть несколько скриптов-симуляторов. Обычно они работают, помещая текст по умолчанию в поле ввода, присваивая ему серый цвет и удаляя его снова, как только вы сфокусируете поле ввода.

Недостаток этого подхода заключается в том, что текстовый заполнитель находится в поле ввода. Таким образом:

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

Мне бы хотелось иметь решение, в котором текст-заполнитель отсутствует в самом вводе.

Ответы [ 17 ]

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

Я написал плагин jquery для решения этой проблемы .. это бесплатно ..

Каталог JQuery:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Сайт: www.kegles.com.br/jquery-placeholder/

0 голосов
/ 19 ноября 2015

Вот чистая функция javascript (не требуется jquery), которая создаст заполнители для IE 8 и ниже и работает также для паролейОн читает атрибут заполнителя HTML5, создает элемент span за элементом формы и делает фон элемента прозрачным: 

/* 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 голосов
/ 29 января 2015

Чтобы вставить плагин и проверить то есть отлично работаетjquery.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 голосов
/ 13 января 2014

ПРИМЕЧАНИЕ: автор этого полифилла утверждает, что он «работает практически во всех браузерах, которые вы можете себе представить», но, согласно комментариям, это не относится к IE11, однако IE11 имеет встроенную поддержку, как и большинство современных браузеров

Placeholder.js - лучший заполнитель заполнителя, который я когда-либо видел, он легок, не зависит от JQuery, охватывает другие старые браузеры (не только IE) и имеет опции длязаполнители для скрытия при вводе и однократного выполнения.

0 голосов
/ 11 ноября 2013

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

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

0 голосов
/ 23 сентября 2013

я использую jquery.placeholderlabels .Он основан на this и может быть демо здесь .

работает в ie7, ie8, ie9.

поведение имитирует текущее поведение firefox и chromeгде текст «заполнителя» остается видимым в фокусе и исчезает только после того, как что-то введено в поле.

0 голосов
/ 30 июля 2013

Placeholdr - это сверхлегкий вставной заполнитель jQuery polyfill, который я написал. Уменьшено менее 1 КБ.

Я убедился, что эта библиотека решает обе ваши проблемы:

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

  2. Placeholdr прослушивает отправку формы и удаляет текст заполнителя из полей, так что сервер просто видит пустое значение.

Опять же, моя цель в Placeholdr - предоставить простое решение проблемы заполнителя. Дайте мне знать на Github, есть ли что-то еще, что вы хотели бы получить от Placeholdr.

Страница:
...