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

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

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

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

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

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

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

Просматривая раздел «Веб-формы: заполнитель ввода» в HTML5 Cross Browser Polyfills , я увидел jQuery-html5-placeholder .

Я попробовал демо-версию с 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>

Там также есть другие прокладки, но я не смотрел на них всех. Один из них, Placeholder.js , объявляет себя как «Нет зависимостей (поэтому нет необходимости включать jQuery, в отличие от большинства скриптов-заполнителей заполнителей)».

Редактировать: Для тех, кто более заинтересован в том, «как», «что», как создать расширенный заполнитель-заполнитель HTML5, который проходит через процесс создания плагина jQuery, который делает это.

Кроме того, см. В статье « Сохранение местозаполнителя в фокусе» в IE10 комментарии о том, как текст заполнителя пропадает в фокусе в IE10, что отличается от Firefox и Chrome. Не уверен, что есть решение этой проблемы.

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

С реализацией 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();
      });
  });
} 

После того, как вы попробовали некоторые предложения и увидели проблемы в IE, вот то, что работает:

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

Что мне понравилось - вы просто включите файл JS. Не нужно инициировать это или что-то.

• Работает только для IE9 +

Следующее решение связывает входные текстовые элементы с атрибутом placeholder. Он эмулирует поведение заполнителя только для 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('');
        }
      });
    });
  }
});

Я предлагаю вам простую функцию:

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 :)');

Я нашел довольно простое решение, используя этот метод:

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

это взлом JQuery, и он отлично работал на моих проектах

Ты можешь использовать :

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);

Просто так:

$(function() {
    ...

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

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

    ...
});

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

Справочник JQuery:

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

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

Я придумал простой сценарий-заполнитель 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');
            }
        });
    });
});

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

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

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

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

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

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

Вот чистая функция 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>

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

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

Я использую jquery.placeholderlabels . Это основано на этом и может быть продемонстрировано здесь .

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

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

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

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