Кажется, это очень известная проблема, но все решения, которые я нашел в Google, не работают в моем недавно загруженном IE9.
Какой ваш любимый способ для того , чтобы позволить Placeholder
собственности на input
и textarea
тегах?
Необязательно: я потерял на этом много времени и еще не искал required
недвижимость. Не могли бы вы дать совет по этому поводу? Очевидно, я могу проверить значение в PHP, но это свойство очень удобно для помощи пользователю.
javascript
html
internet-explorer-9
placeholder
chriscatfr
источник
источник
Ответы:
Плагин HTML5 Placeholder jQuery
- от Матиаса Биненса (соавтор HTML5 Boilerplate и jsPerf )
https://github.com/mathiasbynens/jquery-placeholder
Демо и примеры
http://mathiasbynens.be/demo/placeholder
ps
Я использовал этот плагин много раз, и он работает очень хорошо. Кроме того, он не отправляет текст заполнителя в качестве значения при отправке формы (... настоящая боль, которую я обнаружил с другими плагинами).
источник
onclick="_IW.FormsRuntime.submit(this.form);"
. Есть ли способ изменить это событие onclick, чтобы сначала очистить заполнители, а затем запустить этот код CRM, который существует в onclick?Думаю, это то, что вы ищете: jquery-html5-placeholder-fix
Это решение использует обнаружение функций (через modernizr ), чтобы определить, поддерживается ли заполнитель. Если нет, добавляет поддержку (через jQuery).
источник
$(this)
должна быть назначена переменная, которую можно использовать во всем коде. Обращение$
к каждому используемому выражению запрещено$(this)
прямо из «Не пишите jQuery Like This 101».Если вы хотите сделать это без использования jquery или моденизатора, вы можете использовать следующий код:
(function(){ "use strict"; //shim for String's 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's 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's 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's placeholder attribute //as if it's 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's just the empty string do nothing.. placeHolder = trim(placeHolder); if(placeHolder === '') return; //called on blur - sets the value to the place holder if it's 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's 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: "/>
источник
Используя 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')); }) }
источник
placeholder
свойство было стандартизовано как строка => на самом деле нет необходимости в Modernizr :::::::::::::::::::::::::::::if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }
тест на отсутствие поддержки, тестирование в режиме эмуляции IE9 - работает.Я знаю, что опаздываю, но я нашел решение, вставив в заголовок тег:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->
источник
чтобы он работал в IE-9, используйте ниже. он работает для меня
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;}
источник
Немного опоздал на вечеринку, но я использую свой проверенный и проверенный 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(''); } }) }); }
источник
Я обычно очень высоко отношусь к 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 для решения этой проблемы. На моей стороне это было решено и работало на ie 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")); } }); } });
источник