Заполнитель не работает в Internet Explorer

Question

Заполнитель для моего текстового поля в нижнем формате не работает в Internet Explorer. Есть ли все-таки, чтобы отобразить местозаполнитель для TextBox в Internet Explorer?

<asp:TextBox id="email" runat="server" width="300" placeholder="Your email" />

Есть ли простой способ просто с помощью любого JavaScript. Мне не интересно усложнять работу с помощью jQuery.

Answer 1

Вы можете имитировать это с помощью чистого JavaScript:

var _debug = false; 
var _placeholderSupport = function() { 
    var t = document.createElement("input"); 
    t.type = "text"; 
    return (typeof t.placeholder !== "undefined"); 
}(); 

window.onload = function() { 
    var arrInputs = document.getElementsByTagName("input"); 
    var arrTextareas = document.getElementsByTagName("textarea"); 
    var combinedArray = []; 
    for (var i = 0; i < arrInputs.length; i++) 
     combinedArray.push(arrInputs[i]); 
    for (var i = 0; i < arrTextareas.length; i++) 
     combinedArray.push(arrTextareas[i]); 
    for (var i = 0; i < combinedArray.length; i++) { 
     var curInput = combinedArray[i]; 
     if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea") 
      HandlePlaceholder(curInput); 
     else if (curInput.type == "password") 
      ReplaceWithText(curInput); 
    } 

    if (!_placeholderSupport) { 
     for (var i = 0; i < document.forms.length; i++) { 
      var oForm = document.forms[i]; 
      if (oForm.attachEvent) { 
       oForm.attachEvent("onsubmit", function() { 
        PlaceholderFormSubmit(oForm); 
       }); 
      } 
      else if (oForm.addEventListener) 
       oForm.addEventListener("submit", function() { 
        PlaceholderFormSubmit(oForm); 
       }, false); 
     } 
    } 
}; 

function PlaceholderFormSubmit(oForm) {  
    for (var i = 0; i < oForm.elements.length; i++) { 
     var curElement = oForm.elements[i]; 
     HandlePlaceholderItemSubmit(curElement); 
    } 
} 

function HandlePlaceholderItemSubmit(element) { 
    if (element.name) { 
     var curPlaceholder = element.getAttribute("placeholder"); 
     if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) { 
      element.value = ""; 
      window.setTimeout(function() { 
       element.value = curPlaceholder; 
      }, 100); 
     } 
    } 
} 

function ReplaceWithText(oPasswordTextbox) { 
    if (_placeholderSupport) 
     return; 
    var oTextbox = document.createElement("input"); 
    oTextbox.type = "text"; 
    oTextbox.id = oPasswordTextbox.id; 
    oTextbox.name = oPasswordTextbox.name; 
    //oTextbox.style = oPasswordTextbox.style; 
    oTextbox.className = oPasswordTextbox.className; 
    for (var i = 0; i < oPasswordTextbox.attributes.length; i++) { 
     var curName = oPasswordTextbox.attributes.item(i).nodeName; 
     var curValue = oPasswordTextbox.attributes.item(i).nodeValue; 
     if (curName !== "type" && curName !== "name") { 
      oTextbox.setAttribute(curName, curValue); 
     } 
    } 
    oTextbox.originalTextbox = oPasswordTextbox; 
    oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox); 
    HandlePlaceholder(oTextbox); 
    if (!_placeholderSupport) { 
     oPasswordTextbox.onblur = function() { 
      if (this.dummyTextbox && this.value.length === 0) { 
       this.parentNode.replaceChild(this.dummyTextbox, this); 
      } 
     }; 
    } 
} 

function HandlePlaceholder(oTextbox) { 
    if (!_placeholderSupport) { 
     var curPlaceholder = oTextbox.getAttribute("placeholder"); 
     if (curPlaceholder && curPlaceholder.length > 0) { 
      Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder); 
      oTextbox.value = curPlaceholder; 
      oTextbox.setAttribute("old_color", oTextbox.style.color); 
      oTextbox.style.color = "#c0c0c0"; 
      oTextbox.onfocus = function() { 
       var _this = this; 
       if (this.originalTextbox) { 
        _this = this.originalTextbox; 
        _this.dummyTextbox = this; 
        this.parentNode.replaceChild(this.originalTextbox, this); 
        _this.focus(); 
       } 
       Debug("input box '" + _this.name + "' focus"); 
       _this.style.color = _this.getAttribute("old_color"); 
       if (_this.value === curPlaceholder) 
        _this.value = ""; 
      }; 
      oTextbox.onblur = function() { 
       var _this = this; 
       Debug("input box '" + _this.name + "' blur"); 
       if (_this.value === "") { 
        _this.style.color = "#c0c0c0"; 
        _this.value = curPlaceholder; 
       } 
      }; 
     } 
     else { 
      Debug("input box '" + oTextbox.name + "' does not have placeholder attribute"); 
     } 
    } 
    else { 
     Debug("browser has native support for placeholder"); 
    } 
} 

function Debug(msg) { 
    if (typeof _debug !== "undefined" && _debug) { 
     var oConsole = document.getElementById("Console"); 
     if (!oConsole) { 
      oConsole = document.createElement("div"); 
      oConsole.id = "Console"; 
      document.body.appendChild(oConsole); 
     } 
     oConsole.innerHTML += msg + "<br />"; 
    } 
} 

Это не будет делать ничего, если браузер уже поддерживает атрибут placeholder, и в случае, если оно не поддерживается (например, браузер IE) это добавит очень аналогичная функциональность - текст, отображаемый по умолчанию, исчезает в фокусе и появляется снова, если пользователь ничего не вводил.

Live test case.

Исправление

6 ноября 2012: Предыдущий код не удалось обнаружить, если браузер не имеет встроенную поддержки для заполнителя. Используя найденный код in this other post, он теперь исправлен. Затронутые браузеры: IE7 и IE8, возможно, и другие. Также добавлена ​​поддержка отладки, которая помогает отлаживать будущие проблемы.

30 января 2013:

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

2. Исправлена ​​ошибка, которая вызывала отправку значения-заполнителя, когда пустое значение должно быть отправлено на сервер при отправке формы, связанной с вводом. Для этого код привязывается к событию отправки формы и при необходимости очищает значение.

24 Jan, 2 014: добавлена ​​поддержка <textarea> элементов.

Answer 2

Заполнитель - это функция HTML5. Для того, чтобы обойти я обнаруживаю MSIE и сделать это:

if ($.browser.msie) { 
    $("#textarea-id").val('placeholder'); 
    $("#textarea-id").focus(function(){ 
     this.select(); 
    }); 
} 

Его JQuery, но не так уж сложно ...

Answer 3

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

Вместо того, чтобы повторить то, что было написано в другом месте, я бы рекомендовал идти здесь: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills и прокрутите вниз примерно на 1/3 пути к разделу Web Forms: ввод заполнителей несколько различных вариантов (как родной JS и jQuery). Поскольку эта целая страница куратором команды HTML5 Boilerplate, вы можете быть достаточно уверены, что предоставленные сценарии имеют достойное качество.

Редактировать: просто видели ваши комментарии о том, что вы не используете HTML5. Сценарии на ссылке, которую я предоставил , должны по-прежнему работать, даже если вы не используете доктрину HTML5 (никаких явных или подразумеваемых гарантий и т. Д.).

Answer 4

Я имел этот вопрос в последнее время - я использую Modernizr для обнаружения функции html5, а затем запустить немного JS для браузеров, которые не могут справиться:

function addPlaceHolder(input) {//using modernizr add placeholder text for non html5 users 
    if (!Modernizr.input.placeholder) { 
     input.focus(function() { 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
       input.removeClass('placeholder'); 
      } 
     }).blur(function() { 
      if (input.val() == '' || input.val() == input.attr('placeholder')) { 
       input.addClass('placeholder'); 
       input.val(input.attr('placeholder')); 
      } 
     }).blur(); 
     $(input).parents('form').submit(function() { 
      $(this).find(input).each(function() { 
       if (input.val() == input.attr('placeholder')) { 
        input.val(''); 
       } 
      }) 
     }); 
    } 
} 

addPlaceHolder($('#Myinput')); 

кажется, работает хорошо для меня!

Answer 5

Просто схватил код сверху и сделал это более общий

<script type="text/javascript"> 


function addPlaceHolder(input) { 

    if (!Modernizr.input.placeholder) { 
     input.focus(function() { 
      if ($(this).val() == $(this).attr('placeholder')) { 
       $(this).val(''); 
       $(this).removeClass('placeholder'); 
      } 
     }).blur(function() { 
      if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')) { 
       $(this).addClass('placeholder'); 
       $(this).val($(this).attr('placeholder')); 
      } 
     }).blur(); 
     $(input).parents('form').submit(function() { 
      $(this).find(input).each(function() { 
       if ($(this).val() == $(this).attr('placeholder')) { 
        $(this).val(''); 
       } 
      }) 
     }); 
    } 
} 

    addPlaceHolder($(':text')); 
    addPlaceHolder($('textarea')); 

</script> 

Answer 6

раз я столкнулся с этой проблемой

и эту ссылку http://bavotasan.com/2011/html5-placeholder-jquery-fix

воля дает вам хорошее решение

Answer 7

I написали этот простой код, и он работал отлично для меня при тестировании:

placeholder=function(){ 
    $('input, textarea').each(function(){ 
     var holder=$(this).attr('placeholder'); 
     if(typeof(holder) !=='undefined'){ 
      $(this).val(holder); 
      $(this).bind('click',function(){ 
       $(this).val(''); 
      }).blur(function(){ 
       $(this).val(holder); 
      }); 
     } 
    }); 
}; 
$(document).ready(placeholder); 

Answer 8

Вы можете использовать JavaScript Polyfill, чтобы сделать работу заполнителя более старыми. Там много полифилов. Вот один из них, который рассказывает о Making Placeholders work in IE. В основном, что все эти скрипты делают, это имитировать поведение поддержки локального заполнителя браузера с использованием JavaScript.