Estoy trabajando en un diseño de respuesta. He golpeado un poco de la pared con la que no había espacio suficiente para un input cuadro y es label. Así que he decidido ocultar la etiqueta en tamaños de pantalla más pequeños.

En la actualidad se cuenta con el texto de marcador de posición your email dentro de ella, pero quiero sólo en pantallas de menos de 400 (hasta 399px de ancho) un lugar diferente titular de la Join our newsletter.

Creo que habrá algunos JS para realizar esto, más que nada con CSS.

Esencialmente:
si el tamaño de la pantalla a menos de 400:
texto de marcador de posición = Únete a nuestro boletín

otra cosa:
texto de marcador de posición = Tu correo electrónico.

Aquí está el código HTML que tengo:

<div id="mc_embed_signup">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>
  • Si usted está buscando para Puro CSS solución, puede crear 2 input con diferentes marcadores de posición, y administrar sus display propiedad de CSS3 @media.
InformationsquelleAutor Francesca | 2013-08-11

6 Comentarios

  1. 24

    CSS solución, podríamos tener dos <input>s – que tienen diferentes placeholders – que se muestran en diferentes tamaños de pantalla – Ejemplo aquí:

    CSS:

    input.large { display: inline-block; }
    input.small { display: none; }
    
    @media (max-width: 399px) { 
      input.large { display: none; }
      input.small { display: inline-block; }
    }

    HTML:

    <input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email">
    <input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">

    Notas importantes:

    1. En este caso, debemos asegurarnos de que el id de nuestros dos inputs son diferentes. Además, Si id se agrega a <input> sólo a causa de su uso para label elementos, podríamos simplemente envuelva la input por label lugar.

    2. El uso de más de un input que tienen el mismo name, se anulan los name/value par en HTTP método de solicitud.

    Una posible solución es el uso de un nombre de matriz de valor para name atributo, (como el ejemplo de arriba) y la manija en el lado del servidor (Es mejor mantener name valores en minúsculas).

    Alternativamente, podríamos disable oculto input a fin de evitar su valor de ser enviado al servidor:

    $('input:hidden').prop("disabled", true);

    El uso de JavaScript en un Puro CSS Solución? Tal vez… tal vez no… pero a día de hoy no hay sitios web en el mundo moderno están vacíos de JavaScript. Si ayuda a deshacerse del problema, está bien para tener las manos un poco sucias!.

    • Excelente idea! No lo había pensado de esta manera. Gracias!
    • darle a este hombre un cookie 😀
    • esta es una solución inteligente, y funciona muy bien en Angular de aplicaciones si se unen ambos campos para el mismo modelo de datos
    • Simple pero elegante solución. Gracias.
  2. 13
    if ($(window).width() < 400 ) {
        $("input[type='email']").attr("placeholder","join our newsletter");
    }
    else { $("input[type='email']").attr("placeholder","your email");}

    demo: http://jsfiddle.net/fcrX5/

    • Gracias por el jQuery solución. 🙂
  3. 7

    Mientras que un poco chapucero, es posible hacerlo en puro HTML/CSS (no requiere javascript) sin duplicar los elementos en el DOM si sólo necesita mostrar/ocultar el texto, no la cambio.

    El truco es simplemente el estilo del texto de marcador de posición de forma diferente dependiendo de la anchura (o cualquiera que sea tu consulta de medios de comunicación es) y cambiar la opacidad para hacer aparecer o desaparecer, así:

    input.responsive::-webkit-input-placeholder,
    input.responsive::-moz-placeholder,
    input.responsive:-moz-placeholder,
    input.responsive:-ms-input-placeholder { 
        color: rgba(25, 25, 25, 1.0);
    }
    
    @media (max-width: 399px) { 
        input.responsive::-webkit-input-placeholder,
        input.responsive::-moz-placeholder,
        input.responsive:-moz-placeholder,
        input.responsive:-ms-input-placeholder { 
            color: rgba(0, 0, 0, 0);
        }
    }
    • Como lo que yo puedo decir, que la sintaxis no funciona. Con el fin de hacer el trabajo que tuve que crear las entradas individuales, tales como
  4. 1
      This script include initial setting of the placeholder and changing on resizing the window:
    
    
    //set responsive mobile input field placeholder text
            if ($(window).width() < 769) {
                $("input").attr("placeholder", "Short text");
            }
            else {
                $("input").attr("placeholder", "Long text for wide input filed");
            }
            $(window).resize(function () {
                if ($(window).width() < 769) {
                    $("input").attr("placeholder", "Short text");
                }
                else {
                    $("input").attr("placeholder", "Long text for wide input field");
                }
            });
  5. 0

    Acaba de comprobar el tamaño de la pantalla, y actuar en consecuencia :

    $(function() {
        var txt = screen.width < 400 ? 'Join our newsletter' : 'Your email';
        $('#mce-EMAIL').attr('placeholder', txt);
    });

    Nota de que explícitamente le pidió «» tamaño de la pantalla, el tamaño de la ventana y cambiar el tamaño de los eventos son algo completamente distinto.

  6. 0

    si el uso de angulares y lodash puede utilizar esta directiva que he escrito para mi uso en uno de los proyectos donde el diseñador insistió…

    lodash se utiliza sólo para salvarnos de la escritura de la debouncer función de ventana.cambiar el tamaño de los hechos, puede ser reemplazado en 5 minutos de repetitivo setTimeout cosita…

    angular.module('yourModuleNameHere').directive('mediaPlaceholder', function    ($window, $parse) {
        return {
            restrict: 'A',
            link: function ($scope, $elem, $attrs) {
                var defObj = $parse($attrs.mediaPlaceholder)($scope);
    
                function setPlaceholder() {
                    var lastFitting, windowWidth = $($window).width();
                    angular.forEach(defObj, function (placeholderValue,widthSetting) {
                        if (parseInt(widthSetting) <= windowWidth) {
                            lastFitting = placeholderValue;
                        }
                    });
                    $elem.attr('placeholder', lastFitting);
                }
    
                setPlaceholder();
                $($window).resize(_.debounce(setPlaceholder, 40));
            }
        };
    })

    uso como esta:

    <input type="search" media-placeholder="{0:'search',989:'long search placeholder'}">

Dejar respuesta

Please enter your comment!
Please enter your name here