Marcador de posición en IE9


140

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 su forma favorita para habilitar la Placeholderpropiedad en las etiquetas inputy textarea?

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


Estoy de vuelta en HTML después de 4 años. Lo que significa que estoy abierto a cualquier consejo para reemplazar mis herramientas obsoletas. Reinicio casi desde cero. He estado intentando principalmente con JQuery y muchas copias / pasadas de los resultados de Google, mi
último

Respuestas:


185

HTML5 Placeholder Plugin jQuery
- por Mathias Bynens (un colaborador en HTML5 Boilerplate y jsPerf )

https://github.com/mathiasbynens/jquery-placeholder

Demo y ejemplos

http://mathiasbynens.be/demo/placeholder

PD:
He usado este complemento muchas veces y funciona de maravilla. Además, no envía el texto del marcador de posición como un valor cuando envía su formulario (... un verdadero dolor que encontré con otros complementos).


Estamos trabajando con un CRM personalizado. Agregué este código y los trabajos como se esperaba, pero envían sus formularios a través de JavaScript. El botón de enviar tiene onclick="_IW.FormsRuntime.submit(this.form);". ¿Hay alguna forma de cambiar este evento onclick para borrar primero los marcadores de posición y luego ejecutar este código CRM que existe en el onclick?
Leeish

1
Copié el archivo github js en mi código src. Todavía no ir con el marcador de posición.
Philo

2
De hecho, esto funciona de maravilla, sin embargo, es difícil de usar en aplicaciones de una sola página. Debe activarlo manualmente para campos agregados dinámicamente. Aparte de eso, funciona muy bien!
smets.kevin

1
Gracias, plugin ordenado, sin embargo, un problema que tengo es con ie9, el marcador de posición desaparece cuando la entrada de texto está enfocada. Esto es diferente al comportamiento HTML5
gerrytan

1
Funciona bien con un gran 'pero', $ ('input'). Val () devuelve el valor del marcador de posición cuando la entrada está vacía. Debido a que estoy trabajando con el marco AJAX, esos marcadores de posición se envían al servidor ...
Danubian Sailor

21

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

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


2
Funciona, pero no es el mejor código. En la parte superior se $(this)debe asignar a una variable que se puede utilizar en todo el código. Llamar $a cada expresión que usa $(this)es un no-no directamente de "No escriba jQuery Like This 101".
Sami Samhuri

20
Debe tener cuidado con este código ya que si envía el formulario, el valor del marcador de posición se enviará como un valor de formulario. Debe borrarlo antes de que se envíe.
ericbae

2
@chriscatfr Por favor considere aceptar mi respuesta ( stackoverflow.com/a/13281620/114140 ) ya que creo que dirigirá a los usuarios de SO hacia una solución mucho mejor.
Chris Jacob

Curioso porque soy nuevo en la batalla de las características de HTML 5: ¿Es el modernizador el que hace que esta sea una mala solución o el jquery-html5-placeholder-fix (o ambos)?
Snekse

Esto es simple y elegante e hizo el trabajo por mí.
graumanoz

17

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 ejecutarlo placeHolder(HTMLInputElement), pero supongo que puede cambiarlo para adaptarlo. Además, hacerlo de esta manera, en lugar de solo en carga, significa que puede hacer que funcione para entradas que no están en el DOM cuando se carga la página.

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


1
Lo siento, realmente no sé si eso es fácil de hacer, supongo que le gustaría mostrar el valor de texto real, en lugar de los "símbolos". El único truco que se me ocurre para hacer esto sería cambiarlo por una entrada de texto a menos que tenga un foco o un valor, de lo contrario, se mostrará como un campo de contraseña.
Mark Rhodes

@StephenPatten Eche un vistazo a mi solución para marcadores de posición con campos de contraseña. Hago exactamente lo que Mark sugirió :)
Chev

8

Aquí hay una solución mucho mejor. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Lo adopté un poco para que funcione solo con navegadores en 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>

no funciona en IE8 ya que IE no permite que jQuery manipule los tipos de entrada (consulte el comentario de Bill el 20 de diciembre de 2011 a las 1:48 pm en bavotasan.com/2011/html5-placeholder-jquery-fix )
forste

también supone que está enviando un formulario. La mayoría de las aplicaciones de una sola página que he visto no usan formularios. simplemente haga clic en controladores.
chovy

5

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

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

1
No lo probé yo mismo, pero adivinar esto no funciona bien si tabula el campo en lugar de hacer clic en él. Veo este error en muchos sitios web o en otros similares.
eselk

Con esta solución, también debe verificar este valor en el envío del formulario.
Igor Jerosimić

Me sorprende que haya obtenido algún voto, esto no debe usarse incluso cuando se publicó en 2012/2013
LocalPCGuy

Si escribe en la entrada, lo que debería ser el marcador de posición ('CV2:') lo que escribió se eliminará.
Daniel

2

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

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

2
Debe tener cuidado con este código ya que si envía el formulario, el valor del marcador de posición se enviará como un valor de formulario. Debe borrarlo antes de que se envíe.
chriscatfr

3
@chriscatfr: ¿Cómo se haría eso correctamente en este ejemplo? Si mi marcador de posición es 'Contraseña' y mi contraseña en realidad es 'Contraseña'?
Lain

Podría usar el concepto de "sucio" para campos como este. Marque el campo como limpio al ingresar (tal vez use data-dirty = "false"). Si envían el formulario sin cambiar el texto del marcador de posición, verá que el campo está limpio, así que elimínelo. Si lo cambiaron, incluso al mismo valor que el marcador de posición, entonces está sucio y usted envía ese valor.
oooyaya

para obtener la contraseña y otra solución, consulte jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel

placeholderla propiedad se estandarizó como cadena => no es necesario que Modernizr en realidad ::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }es prueba de prueba para no soporte, probado en modo IE9 emulación - funciona.
jave.web

2

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-->


¿Probaste esto en IE9? Porque de lo contrario, IE10 + admite el marcador de posición ...
jave.web

Por supuesto, es extraño, que IE9 no lo admite por sí mismo, ya que una etiqueta lo activaría, ¿era una característica experimental en ese momento? ¿Se hace referencia a esto en alguna parte? :)
jave.web

1

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

1
debería corregir su formato aquí, como agregar sangría y separar su respuesta de su código
un oscuro

1

Llegué un poco tarde a la fiesta, pero uso mi JS probado y de confianza que aprovecha Modernizr . Se puede copiar / pegar y aplicar a cualquier proyecto. Funciona siempre:

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

}

Todas estas soluciones usando jQuery ... ¿no hay solución sin la jQuery hinchada?
Spock

0

Usualmente pienso bastante bien en 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();
    });
  }
});

1
Este complemento también requiere la biblioteca de prototipos
rosswil

0

Busqué en Internet y encontré un código jquery simple para manejar este problema. A mi lado, se resolvió y funcionó, 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"));
                }
            });
        }
    });

2
su marcador de posición se convierte en el valor. Si envía, se enviarán. Con placeholder.js de la respuesta correcta, los campos se mantienen vacíos
chriscatfr
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.