Заполнитель для моего текстового поля в нижнем формате не работает в Internet Explorer. Есть ли все-таки, чтобы отображать placeholder для TextBox в Internet Explorer?
<asp:TextBox id="email" runat="server" width="300" placeholder="Your email" />
Есть ли простой способ, просто используя любой JavaScript. Мне неинтересно, что это осложняется с помощью jQuery.
Вы можете имитировать это, используя чистый 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), он добавит очень похожие функциональные возможности - текст, показанный по умолчанию, исчезает в фокусе и появляется снова если пользователь ничего не вводил.
Исправления ошибок
6 ноября 2012: Предыдущий код не смог обнаружить, когда браузер не имел встроенной поддержки для заполнителя. Используя код найденный в этом другом сообщении, он теперь исправлен. Затронутые браузеры: IE7 и IE8, возможно, и другие. Также добавлена поддержка отладки, которая помогает отлаживать будущие проблемы.
30 января 2013 года:
Добавление поддержки ввода пароля также. Поскольку IE8 и ниже не допускают динамического изменения типа ввода, код заменяет ввод пароля текстовым вводом до тех пор, пока не будет введен пароль, поэтому будет отображаться текст-заполнитель.
Исправлена ошибка, которая вызывала отправку значения-заполнителя, когда пустое значение должно быть отправлено на сервер при отправке формы, связанной с вводом. Для этого код прикрепляется к событию отправки формы и при необходимости очищает значение.
24 января 2014: добавление поддержки элементов <textarea>.
Существует несколько сценариев polyfill, которые добавят поддержку закладок в браузеры, которые не поддерживают эту технологию.
Вместо того, чтобы повторять то, что было написано в другом месте, я бы рекомендовал перейти сюда: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills и прокрутить вниз примерно на 1/3 пути в раздел, озаглавленный Веб-формы: вводщик, для нескольких различных параметров (как встроенных JS, так и jQuery). Поскольку эта целая страница куратором команды HTML5 Boilerplate, вы можете быть достаточно уверены, что предоставленные сценарии имеют достойное качество.
Изменить: просто увидели ваши комментарии о том, что вы не используете HTML5. Скрипты в предоставляемой ссылке должны по-прежнему работать, даже если вы не используете доктрину HTML5 (никаких явных или подразумеваемых гарантий и т.д.).
Я написал этот простой код, и он работал отлично для меня при тестировании:
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);
как только я столкнулся с этой проблемой
и эта ссылка http://bavotasan.com/2011/html5-placeholder-jquery-fix
даст вам хорошее решение
Заполнитель - это функция HTML5. Чтобы обойти, я обнаруживаю MSIE и делаю это:
if ( $.browser.msie ) {
$("#textarea-id").val('placeholder');
$("#textarea-id").focus(function(){
this.select();
});
}
Его jquery, но не тот сложный...
У меня была эта проблема в последнее время - я использую 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'));
похоже, хорошо работает для меня!
Вы можете использовать JavaScript Polyfill, чтобы заставить заполнитель работать в старых браузерах. Там много полифилов. Вот один из них, в котором говорится о "Создание заполнитель" в IE. В основном, что все эти скрипты делают, это имитировать поведение поддержки локального заполнителя браузера с использованием JavaScript.
Просто схватил код сверху и сделал его более общим
<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>