Кажется, это очень хорошо известная проблема, но все решения, которые я нашел в Google, не работают на моем недавно загруженном IE9.
Какой ваш любимый способ включить свойство Placeholder в тегах input и textarea?
Дополнительно: я потерял много времени и не искал свойство required. У вас также есть некоторые советы для этого? Очевидно, что я могу проверить значение в PHP, но чтобы помочь пользователю это свойство очень удобно.
HTML5 Заполнитель-плагин jQuery
- Mathias Bynens (сотрудник HTML5 Boilerplate и jsPerf)
https://github.com/mathiasbynens/jquery-placeholder
Демо и примеры
http://mathiasbynens.be/demo/placeholder
p.s
Я использовал этот плагин много раз, и он работает. Также он не отправляет текст заполнителя в качестве значения при отправке формы (... реальной боли, которую я нашел с другими плагинами).
Я думаю, что это то, что вы ищете: jquery-html5-placeholder-fix
Это решение использует обнаружение функции (через modernizr), чтобы определить, поддерживается ли заполнитель. Если нет, добавляет поддержку (через jQuery).
Если вы хотите сделать это без использования jquery или modenizer, вы можете использовать следующий код:
(function(){
"use strict";
//shim for String trim function..
function trim(string){
return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
}
//returns whether the given element has the given class name..
function hasClassName(element, className){
//refactoring of Prototype function..
var elClassName = element.className;
if(!elClassName)
return false;
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
return regex.test(element.className);
}
function removeClassName(element, className){
//refactoring of Prototype function..
var elClassName = element.className;
if(!elClassName)
return;
element.className = elClassName.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
}
function addClassName(element, className){
var elClassName = element.className;
if(elClassName)
element.className += " " + className;
else
element.className = className;
}
//strings to make event attachment x-browser..
var addEvent = document.addEventListener ?
'addEventListener' : 'attachEvent';
var eventPrefix = document.addEventListener ? '' : 'on';
//the class which is added when the placeholder is being used..
var placeHolderClassName = 'usingPlaceHolder';
//allows the given textField to use it placeholder attribute
//as if it functionality is supported natively..
window.placeHolder = function(textField){
//don't do anything if you get it for free..
if('placeholder' in document.createElement('input'))
return;
//don't do anything if the place holder attribute is not
//defined or is blank..
var placeHolder = textField.getAttribute('placeholder');
if(!placeHolder)
return;
//if it just the empty string do nothing..
placeHolder = trim(placeHolder);
if(placeHolder === '')
return;
//called on blur - sets the value to the place holder if it empty..
var onBlur = function(){
if(textField.value !== '') //a space is a valid input..
return;
textField.value = placeHolder;
addClassName(textField, placeHolderClassName);
};
//the blur event..
textField[addEvent](eventPrefix + 'blur', onBlur, false);
//the focus event - removes the place holder if required..
textField[addEvent](eventPrefix + 'focus', function(){
if(hasClassName(textField, placeHolderClassName)){
removeClassName(textField, placeHolderClassName);
textField.value = "";
}
}, false);
//the submit event on the form to which it associated - if the
//placeholder is attached set the value to be empty..
var form = textField.form;
if(form){
form[addEvent](eventPrefix + 'submit', function(){
if(hasClassName(textField, placeHolderClassName))
textField.value = '';
}, false);
}
onBlur(); //call the onBlur to set it initially..
};
}());
Для каждого текстового поля, которое вы хотите использовать для него, вам нужно запустить placeHolder(HTMLInputElement), но я думаю, вы можете просто изменить это, чтобы оно соответствовало! Кроме того, делая это таким образом, а не просто при загрузке, вы можете заставить его работать для входов, которые не находятся в DOM при загрузке страницы.
Обратите внимание, что это работает, применяя класс: usingPlaceHolder к элементу ввода, поэтому вы можете использовать его для его стилизации (например, добавьте правило .usingPlaceHolder { color: #999; font-style: italic; }, чтобы оно выглядело лучше).
Вот гораздо лучшее решение. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Я немного поработал над тем, чтобы работать только с браузерами в IE10
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<script>
// Placeholder fix for IE
$('.lt-ie10 [placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
//if($(this).validationEngine('validate')) { // If using validationEngine
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
i.removeClass('placeholder');
})
//}
});
</script>
...
</html>
Если вы хотите ввести описание, вы можете использовать его. Это работает на IE 9 и всех других браузерах.
<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
чтобы он работал в IE-9, используя ниже .it работает для меня
JQuery необходимо включить:
jQuery(function() {
jQuery.support.placeholder = false;
webkit_type = document.createElement('input');
if('placeholder' in webkit_type) jQuery.support.placeholder = true;});
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text, textarea, :password').focus(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
Стиль CSS должен включать:
.hasPlaceholder {color: #aaa;}
Используя mordernizr, чтобы обнаружить браузеры, которые не поддерживают Placeholder, я создал этот короткий код, чтобы исправить их.
//If placeholder is not supported
if (!Modernizr.input.placeholder){
//Loops on inputs and place the placeholder attribute
//in the textbox.
$("input[type=text]").each( function() {
$(this).val($(this).attr('placeholder'));
})
}
Я знаю, что опаздываю, но нашел решение, вставляющее в голову тег:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->Я обычно довольно высоко оцениваю http://cdnjs.com/, и они перечисляют:
//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js
Не уверен, какой код есть, но выглядит просто:
document.observe('dom:loaded', function(){
var _test = document.createElement('input');
if( ! ('placeholder' in _test) ){
//we are in the presence of a less-capable browser
$$('*[placeholder]').each(function(elm){
if($F(elm) == ''){
var originalColor = elm.getStyle('color');
var hint = elm.readAttribute('placeholder');
elm.setStyle('color:gray').setValue(hint);
elm.observe('focus',function(evt){
if($F(this) == hint){
this.clear().setStyle({color: originalColor});
}
});
elm.observe('blur', function(evt){
if($F(this) == ''){
this.setValue(hint).setStyle('color:gray');
}
});
}
}).first().up('form').observe('submit', function(evt){
evt.stop();
this.select('*[placeholder]').each(function(elm){
if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
});
this.submit();
});
}
});
Я искал в Интернете и нашел простой код jquery для решения этой проблемы. В моей стороне это было решено и работало, т.е. 9.
$("input[placeholder]").each(function () {
var $this = $(this);
if($this.val() == ""){
$this.val($this.attr("placeholder")).focus(function(){
if($this.val() == $this.attr("placeholder")) {
$this.val("");
}
}).blur(function(){
if($this.val() == "") {
$this.val($this.attr("placeholder"));
}
});
}
});
Немного поздно, но я использую свой проверенный JS, который использует Modernizr. Может быть скопирован/вставлен и применен к любому проекту. Работает каждый раз:
// Placeholder fallback
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}