javascript html html5 internet-explorer-9 placeholder

javascript - Marcador de posición en IE9



html html5 (11)

Aquí hay una solución mucho mejor. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Lo he adoptado un poco para trabajar solo con navegadores bajo 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>

Parece que es un problema muy conocido, pero todas las soluciones que encontré en Google no funcionan en mi IE9 recién descargado.

¿Cuál es tu forma favorita para habilitar la propiedad Placeholder en las etiquetas input y textarea ?

Opcional: perdí mucho tiempo con eso y aún no busqué la propiedad required . ¿También tendrías algunos consejos para esto? Obviamente puedo verificar el valor en PHP, pero para ayudar al usuario esta propiedad es muy conveniente.

Busqué en Internet y encontré un código jquery simple para manejar este problema. Por mi parte, fue resuelto y trabajado, es decir, 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")); } }); } });

Creo que esto es lo que estás buscando: jquery-html5-placeholder-fix

Esta solución utiliza detección de características (a través de modernizr ) para determinar si el marcador de posición es compatible. Si no, agrega soporte (a través de jQuery).

Por lo general, considero bastante bien http://cdnjs.com/ y están enumerando:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

No estoy seguro de quién es el código, pero parece sencillo:

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

Sé que llego tarde pero encontré una solución insertando en la cabeza la etiqueta:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->

Si desea hacerlo sin usar jquery o modenizer, puede usar el siguiente código:

(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.. }; }());

Para cada campo de texto que desee usar, debe ejecutar placeHolder(HTMLInputElement) , pero supongo que puede cambiarlo para adaptarlo. Además, hacerlo de esta manera, en lugar de solo cargar, significa que puede hacer que funcione para las entradas que no están en el DOM cuando se carga la página.

Tenga en cuenta que esto funciona aplicando la clase: usingPlaceHolder al elemento de entrada, para que pueda usarlo para darle un estilo (por ejemplo, agregue la regla .usingPlaceHolder { color: #999; font-style: italic; } para que se vea mejor) .

Si desea ingresar una descripción, puede usar esto. Esto funciona en IE 9 y todos los demás navegadores.

<input type="text" onclick="if(this.value==''CVC2: ''){this.value='''';}" onblur="if(this.value==''''){this.value=''CVC2: '';}" value="CVC2: "/>

Un poco tarde para la fiesta, pero utilizo mi probado y confiable JS que aprovecha Modernizr . Se puede copiar / pegar y aplicar a cualquier proyecto. Funciona todo el tiempo:

// 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(''''); } }) }); }

Utilizando mordernizr para detectar navegadores que no son compatibles con Placeholder, creé este código corto para corregirlos.

//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'')); }) }

para que funcione en IE-9, use a continuación. Funciona para mí

JQuery necesita incluir:

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(''''); }); }); } });

El estilo CSS debe incluir:

.hasPlaceholder {color: #aaa;}